它不是一种魔法，只是一个数组
1 .Hooks 的状态管理都是依赖数组的
2 .Hooks API 背后的思想是你可以将一个 setter 函数通过 Hook 函数的第二个参数返回，用该函数来控制 Hook 管理的数据。有点闭包的意思
3 .初始化:创建两个空数组“setters”与“state”,设置指针“cursor”为 0
image.png
4 .首次渲染
1 .首次执行组件函数
2 .每当 useState() 被调用时，如果它是首次渲染，它会通过 push 将一个 setter 方法（绑定了指针“cursor”位置）放进 setters 数组中，同时，也会将另一个对应的状态放进 state 数组中去。
image.png
5 .后续渲染
1 .每次的后续渲染都会重置指针“cursor”的位置，并会从每个数组中读取对应的值
image.png
5处理事件
1 .每个setter都会有一个对应的指针位置的引用，因此当触发任何setter调用的时候都会去触发去改变状态数组中的对应值
image.png
2 .所以你现在应该清除为什么你不应该在条件语句或者循环语句中使用 Hooks 了。因为我们维护了一个指针“cursor”指向一个数组，如果你改变了 render 函数内部的调用顺序，那么这个指针“cursor”将不会匹配到正确的数据，你的调用也将不会指向正确的数据或句柄。
3 .顺序非常重要
网友评论