React Hook工作原理是什么？useState跟踪的值重渲染时为何不会重置？

核心底层逻辑 #

React 会为每一个已挂载的组件实例，维护一块独立的、和组件生命周期绑定的内部状态存储区，这块存储区不会随着组件函数的重复执行被重置，只有当组件卸载时才会被销毁。

分阶段运行流程 #

我们结合你给出的示例代码拆解运行逻辑：

首次挂载阶段 #

1. 组件第一次执行 StateTutorial 函数，遇到 useState("Pedro")
2. React 检查当前组件实例的状态存储区，发现该位置没有对应状态，就把初始值 "Pedro" 存入存储区
3. 返回数组 ["Pedro", setInputValue]，赋值给 inputValue 和 setInputValue
4. 函数继续执行，渲染初始视图，输入框默认展示内容为 Pedro

状态更新触发重渲染阶段 #

1. 你在输入框输入内容触发 onChange，调用 setInputValue 传入新的输入值
2. React 先更新组件状态存储区里对应位置的值为新的输入值
3. 触发组件重渲染，再次执行 StateTutorial 函数
4. 再次遇到 useState("Pedro") 时，React 会直接从组件的状态存储区取出已经更新的最新值，完全忽略传入的初始值 "Pedro"，返回数组 [最新输入值, setInputValue]
5. 函数用最新的状态值渲染新视图，展示你输入的内容

额外补充：Hook 调用顺序的作用 #

React 是靠 Hook 在组件内的调用顺序来匹配状态存储区里的对应条目的，比如你写了三个 useState，调用顺序分别是第1、2、3位，那重渲染的时候也会按顺序取存储区第1、2、3位的最新值，这也是为什么 React 要求 Hook 不能写在 if、for 等可能改变执行顺序的逻辑里，否则会出现状态匹配错乱的问题。

简化类比 #

你可以把组件的状态存储区理解成一个数组，useState 的调用顺序对应数组下标：

• 首次调用 useState(初始值) 相当于往数组 push 初始值
• 后续重渲染调用 useState 相当于按下标取数组里的最新值，传入的初始值不会生效

内容的提问来源于stack exchange，提问作者Finlay Weber