React@16.x（22）HOOK，useState 的原理
1，先容1，出现时间点：在 React@16.8.0 出现。
2，目标：为了增强函数组件的功能，用于替换类组件（类组件中不能使用 HOOK）。
3，原因：类组件中有一些比力麻烦的问题：this 指向、繁琐的生命周期等问题。
4，特点：本质上就是一个函数，该函数可以挂载（hook）一些功能。
最常用的2个HOOK：
[*]useState，作为状态使用。
[*]useEffect，作为生命周期使用。
2，useState
一个函数组件中可以有多个状态，这种做法非常有利于横向切分关注点。
2.1，使用
简朴举例：
import React, { useState } from "react";
export default function App() {
const = useState(0); //使用一个状态，该状态的默认值是0
return (
<div>
<button
onClick={() => {
setN(n - 1);
}}
>
-
</button>
<span>{n}</span>
<button
onClick={() => {
setN(n + 1);
}}
>
+
</button>
</div>
);
}
2.2，原理
正常情况下，函数组件重新渲染（重新运行），函数体中的内容不会保存，并且会返回新的内容。那状态是怎样保持的？
在之前的渲染流程中提到：React 元素会创建React 节点，ReactDOM 会通过节点来举行渲染。
这里做一些补充：
在创建节点的过程中，也会创建并维护一个状态数组，它附着在节点上。
第N次调用 useState 时，会检查节点对应的状态数组是否存在下标N
[*]不存在（初次渲染），则使用默认值创建一个状态，并将该状态加入到下标N的位置。
[*]存在（再次渲染），忽略掉默认值，直接取对应下标的状态值。
另外，正因为 React节点是通过 React 元素创建的，所以React 元素之间相互独立导致每个状态数组 也是独立的，互不影响。
2.3，留意点
1，全部的 useState 最好写到函数起始位置，便于阅读。
至少要写到第一次使用该状态之前。
2，useState严禁出现在代码块中（判断，循环）。
3，useState 返回的函数（数组第2项），引用不变。
函数组件多次渲染时，该状态函数是同一个，为了节省内存。
4，使用状态函数修改状态时，若传递的状态值未做修改（使用Object.is() 比力），不会导致重新渲染。这是为了优化效率。
5，强制刷新。如果状态值是一个对象，则可通过传入一个空对象来实现强制渲染。（2个对象引用差别）
export default function App() {
console.log("App Render");
const [, forceUpdate] = useState({});
return (
<div>
<button
onClick={() => {
forceUpdate({});
}}
>
强制刷新
</button>
</div>
);
}
6，使用状态函数修改状态时，新传入的值会直接替换旧值，而不是归并。
// 使用解构，保留之前的状态
export default function App() {
const = useState({ x: 1, y: 2 });
return (
<div>
<span>{data.x}</span>
<span>{data.y}</span>
<button
onClick={() => {
setData({
...data,
x: data.x + 1,
});
}}
>
x+1
</button>
</div>
);
}
7，如果状态之间没有一定联系，应该分开处理，而不是归并为一个对象。
8，和类组件的状态相似，函数组件中改变状态也大概是异步的（比如DOM变乱），多个状态的修改会集并，以进步效率。
所以，不能信托之前的状态。如果需要用到之前的状态，可以使用函数参数。
和类组件的 setState 一样，如果参数是函数的话，会将每个状态函数的函数参数放到一个队列中，按序次执行。队列执行完毕后，再更新真正的 state，再执行 render（只执行了1次）。
举例：每次点击按钮，n+2，同时只打印一次 App render。
import React, { useState } from "react";
export default function App() {
console.log("App render");
const = useState(0);
return (
<div>
<span>{n}</span>
<button
onClick={() => {
// setN(n + 1)
// setN(n + 1) // 此时，n的值仍然是0
setN((prevN) => prevN + 1);
setN((prevN) => prevN + 1);
}}
>
+
</button>
</div>
);
}
以上。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]