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 [n, setN] = useState(0); //使用一个状态，该状态的默认值是0return (<div><buttononClick={() => {setN(n - 1);}}>-</button><span>{n}</span><buttononClick={() => {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><buttononClick={() => {forceUpdate({});}}>强制刷新</button></div>);
}

6，使用状态函数修改状态时，新传入的值会直接替换旧值，而不是合并。

// 使用解构，保留之前的状态
export default function App() {const [data, setData] = useState({ x: 1, y: 2 });return (<div><span>{data.x}</span><span>{data.y}</span><buttononClick={() => {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 [n, setN] = useState(0);return (<div><span>{n}</span><buttononClick={() => {// setN(n + 1)// setN(n + 1) // 此时，n的值仍然是0setN((prevN) => prevN + 1);setN((prevN) => prevN + 1);}}>+</button></div>);
}

---

以上。