Next.js 第一次接触

  • 因为需要整个漂亮的在线文档,所以接触了next.js,因为对前端js本身不够熟悉,别说对react.js 又不会,时间又不允许深入研究,所以,为了加一个导航菜单,极其痛苦。

  • 有点小bug,不过不影响使用,这样,在线文档的结构,没有大的,问题,总结以下几点:

SVG

  • svg库文件,网上内容很多,不过稍微上规模的svg库都需要注册,  https://iconmonstr.com/ 这个网站很好,直接下载,不过可能不会用的原因,设置16*16就有问题,目前是24*24。

大小不对称,不够美观。

Next.js

  • Next JS 是一个 React 框架,它提供了使用 React JS JavaScript 库创建快速 Web 应用程序的构建块。构建 Next.js 应用程序的先决条件是 JavaScript 和 React JS 知识。建议初学者首先使用 JavaScript 构建应用程序,然后通过将其重写为 React JS 项目,最后是 Next.js 项目来构建该知识。
"scripts": {"dev": "next dev","build": "next build","start": "next start","lint": "next lint"},
  • 是的,不用管那么多,直接使用,好处很多,可惜得花功夫研究,目前得好处就是构建jsx文件确实很爽。

JSX

  • JSX是一种JavaScript的语法扩展,首先运用于React中,其格式比较像是模版语言,但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位,JSX就是用来声明React当中的元素。React主要使用JSX来描述用户界面,但React并不强制要求使用JSX ,而JSX也在React之外的框架得到了广泛的支持,包括Vue.js,Solid 等。
  • React 以后有时间肯定要研究一下的,国外很多组件都是用react开发的,以后肯定会遇到写自己组件的情况。
  • 目前遇到的问题就是:

useEffect与useState

这个必须得看明白,大多数文件都用这玩意,React 函数组件本身不包含状态和生命周期,因此需要使用一些 Hooks (勾子)函数来实现状态保持、状态共享和传递。

useState

可以通过 useState 为函数组件添加内部状态。组件会侦听 state 的状态变化并重新 render 渲染组件。由此衍生的内容太多了,暂时不考虑了,读懂基本逻辑即可。

导出useState函数:const {useState} = React

定义状态的语法:let [state,修改函数] = useState(初始值)

使用:{state};

修改:修改函数(修改后结果)

useEffect

第一种情况:只有一个回调函数参数相当于didMount+didUpdate,并且可以有返回值的;

return 返回是一个钩子函数相当于 willUnmount卸载钩子;

第二种请求 参数1是箭头回调函数,参数2是空数组,相当于didMount 但是只初始化执行一次;

第三种情况 参数1是箭头回调函数 参数2是数组的元素是状态,在初始化走一次,监听第二个参数中的发生变化时候走一次;

以上两个结合使用,监听状态改变,保持最后结果,发生改变的时候,可以做一些什么动作。

favicon

  • 这个玩意又捣鼓了半天,就在 modules/FaviconLoader.sys.mjs 调用,默认路径下就有一个 public下面有个favicon.ico ,vscode里面搜索不到,因为他是文件名,这些小玩意,繁琐,难搞。

结合例子,还是能清楚它的意图,但是对于原理,需要重新从react开始,以此备忘吧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/603331.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习笔记:C++之 switch语句

Switch语句 作用:执行多条件分支语句 语法: switch(表达式){ case 结果1:执行语句;break; case 结果2:执行语句;break; ... default:执行语句&a…

Golang leetcode142 环形链表 暴力map 快慢指针法

文章目录 环形链表 leetcode142暴力遍历 map哈希记录快慢指针法 环形链表 leetcode142 该题目要求找到入环的第一个节点 我们可以通过map进行记录,没到新的节点查询是否经过原有节点 入环节点,上两个节点的next相同 若有入环节点,则一定能检…

如何用python实现一个简单的单向链表?

实现一个简单的单向链表涉及两个基本的构建块:节点(Node)和链表(LinkedList)。下面是详细步骤和解释: 1. 实现节点(Node) 链表中的每个节点通常包含两部分:存储的数据&…

Flutter 图片和资源的高效使用指南

文章目录 指定资源什么是 [pubspec.yaml](https://dart.cn/tools/pub/pubspec) 文件 图片图片常用的配置属性加载本地图片通过 pubspec.yml 文件进行配置图片目录使用 Image.asset 小部件加载本地图片 加载网络图片通过 Image.network小部件加载网络图片:使用Image.…

LeCode:(606. 根据二叉树创建字符串)

题目链接 本体的难点: 什么时候去打印左右括号?什么时候省略? 解题过程:通过观察看到,每次遍历结点之前,打印了一个左括号;遍历到叶子,叶子的左右也要打印出括号来(先…

linux虚拟机环境快速搭建redis5.x版本的主从集群总结

原创/朱季谦 我在阿里云服务器上曾参与过公司redis集群的搭建,但时间久了,都快忘记当时的搭建过程了,故而决定在虚拟机centOS 7的环境,自行搭建一套redis5.x版本的集群,该版本集群的搭建比较方便,不用再像…

实现电子邮件自动化的实用技巧与指南

如何实现电子邮件自动化?一般可以通过规则和过滤器、自动回复、定时发送、快捷键和模板、团队邮箱等方法来实现。 一、什么是电子邮件自动化 电子邮件自动化是一种根据特定条件在适当时机发送正确信息的过程。这些条件可以是时间表、触发器或在您的电子邮件自动化工…

AVL树介绍以及代码实现

二叉搜索树的查找和删除虽然最优情况下能够做到 O(logN) 的级别,但是在一些特殊情况下,它的查找速度只能到达 O(N)级别,比如数据按顺序插入,那么就一定是一棵单边树。 为了针对这种情况,俄罗斯的两位数学家&#xff1a…

android 倒计时控件

效果:(可不设置 之前、之后文字) /*** 倒计时秒数** desc : 时分秒倒计时view* * 布局里引用后,* private fun testMethod(){* binding.test.setCDownStarText("之前的文字")* binding.test.setCDo…

在数据库造数据发现的bug也是bug

上个月,我和开发小哥讨论过一个问题,开发小哥专门提醒我,页面上新增功能尽可能在前端造一些数据去测试,如果直接从数据库里插入的数据,定位问题还是有些说不清楚。 讨论的过程和细节就是以下的对话内容: …

【Sublime Text】| 02——常用插件安装及配置

系列文章目录 【Sublime Text】| 01——下载软件安装并注册 【Sublime Text】| 02——常用插件安装及配置 失败了也挺可爱,成功了就超帅。 文章目录 1. 汉化2. 更换颜色主题3. 更改编码插件—ConvertToUTF84. 对齐插件—Alignment5. 括号高亮插件—BracketHighligh…

网络嗅探器的设计与实现(2024)-转载

1.题目描述 参照 raw socket 编程例子,设计一个可以监视网络的状态、数据流动情况以及网络上传输 的信息的网络嗅探器。 2.运行结果 3.导入程序需要的库 请参考下面链接: 导入WinPcap到Clion (2024)-CSDN博客 4.参考代码 #define HAVE_REMOTE #define LINE_LEN …

XSKY SDS 产品率先获得 OceanBase V4 新版本认证

近日,北京奥星贝斯科技有限公司(简称:OceanBase)与北京星辰天合科技股份有限公司(简称:XSKY 星辰天合)顺利完成产品兼容性认证。 XSKY 的高性能全闪存储以及混闪存储,与 OceanBase V…

ELement UI时间控件el-date-picker误差8小时解决办法

一、问题描述&#xff1a; 在项目中引用了elementui中的date-picker组件&#xff0c;选中的时间跟实际相差八小时&#xff0c;且格式不是自己想要的格式 <el-date-pickertype"date"placeholder"选择日期"format"yyyy/M/d"v-model"form…

Java面试之集合篇

前言 本篇主要总结JAVA面试中关于集合相关的高频面试题。本篇的面试题基于网络整理以及自己的总结编辑。在不断的完善补充哦。欢迎小伙伴们在评论区发表留言哦&#xff01; 1、基础 1.1、Java 集合框架有哪些&#xff1f; Java 集合框架&#xff0c;大家可以看看 《Java 集…

报错处理:java.io.IOException: Could not find resource mybatis-config.xml

运行mybatis文件时出现了以下的情况 java.io.IOException: Could not find resource mybatis-config.xmlat org.apache.ibatis.io.Resources.getResourceAsStream(Resources.java:114)at org.apache.ibatis.io.Resources.getResourceAsStream(Resources.java:100)at org.apach…

对html骨架的详细解释

html的骨架结构 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head…

BRF文件数据结构

一.BRF-文件头数据结构 type_mesh "mesh" 网格 type_material "material" 材质struct brf_header{int type_length; //4个字节, type字符串对应长度char* type_name; //根据type_length获取int type_content_num; //4个字节,对应类型所含个数,例如含有模…

1982-2022年GIMMS 标准化差异植被指数

GIMMS 标准化差异植被指数 1982-2022 PKU GIMMS 归一化植被指数数据集&#xff08;PKU GIMMS NDVI&#xff0c;版本 1.2&#xff09;提供了从 1982 年到 2022 年以半个月为间隔、分辨率为 1/12 的一致的全球 NDVI 数据。其主要目标是解决现有领域中普遍存在的关键不确定性。全…

12.27

吓死了&#xff0c;WPS的协作模式&#xff0c;以为白做了&#xff0c;吓得额头冒冷汗