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开始，以此备忘吧。