小程序迁移，今天我对react hooks有了进一步的认识
~
是这样的，
这几天我一直在迁移一个比较复杂的视频见证的功能，所谓的视频见证，俗话叫双向视频，就是我们去银行柜台办业务经常用到的一个场景
~
上周五在迁移过程中，这个问题就出现了，一直没有找到问题根源
具体报错如下所示
~
今天我是一行代码一行代码删，然后再一行一行恢复，最后定位了问题所在
React Hook 必须按顺序、不能在条件语句中调用
~
不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。
~
限制的原因
这个限制并不是 React 团队凭空造出来的，的确是由于 React Hook 的实现设计而不得已为之。
以 Preact 的 Hook 的实现为例，它用数组和下标来实现 Hook 的查找（React 使用链表，但是原理类似）。
// 当前正在运行的组件
let currentComponent
// 当前 hook 的全局索引
let currentIndex
// 第一次调用 currentIndex 为 0
useState('first')
// 第二次调用 currentIndex 为 1
useState('second')
可以看出，每次 Hook 的调用都对应一个全局的 index 索引，通过这个索引去当前运行组件 currentComponent 上的 _hooks 数组中查找保存的值，也就是 Hook 返回的 [state, useState]
那么假如条件调用的话，比如第一个 useState 只有 0.5 的概率被调用：
// 当前正在运行的组件
let currentComponent
// 当前 hook 的全局索引
let currentIndex
// 第一次调用 currentIndex 为 0
if (Math.random() > 0.5) {
useState('first')
}
// 第二次调用 currentIndex 为 1
useState('second')
在 Preact 第一次渲染组件的时候，假设 Math.random() 返回的随机值是 0.6，那么第一个 Hook 会被执行，此时组件上保存的 _hooks 状态是：
_hooks: [
{ value: 'first', update: function },
{ value: 'second', update: function },
]
用图来标识这个查找过程是这样的：
第一次渲染
假设第二次渲染的时候，Math.random() 返回的随机值是 0.3，此时只有第二个 useState 被执行了，那么它对应的全局 currentIndex 会是 0，这时候去 _hooks[0] 中拿到的确是 first 所对应的状态，这就会造成渲染混乱。本应该渲染出 second 的地方渲染出了 first。
第二次渲染
没错，本应该值为 second 的 value，莫名其妙的被指向了 first，渲染完全错误！
本文在整理过程中参考了很多文章，不限于以下几个
强力驱动