react：hooks为什么不能写在条件语句里

背景

最近朋友在面试，说面试官问到了一个问题不会，说为什么 react hooks为什么不能写在条件语句里，今天我们来研究一下这个问题。

我们在来简单实现一个 useState：

const reRender = () => {stateIndex = -1 ReactDOM.render(<App/>,document.getElementById('root'))
}let stateQueue = []; // 用于存放每个useState返回值。
let stateIndex = -1;  //给每个 useState的返回值一个序号。
function useState(initState) {stateIndex++;stateQueue[stateIndex] = stateQueue[stateIndex] || initState;const currentIndex = stateIndexfunction setState(newState) {stateQueue[currentIndex] = newState;reRender(); //组件重渲染}return [stateQueue[stateIndex],setState]
}

我们用上面写的 useState 来测试看看下面代码的执行过程

function RenderFunctionComponent() {const [name, setName] = useState("Lvan");const [age, setAge] = useState("0");return (<div>{name}</div><div>{age}</div><Button onClick={() => setName("Tom")}>name设置为Tom</Button>);
}

调用两次 useState 后：

stateQueue: ["Lvan", "0"]
stateIndex: 1

这时候点击按钮调用 setName，由于闭包的原因，当前这里的 currentIndex 为 0，然后触发了

stateQueue[0] = "Tom"
// reRender()
stateIndex = -1 
ReactDOM.render(<App/>,document.getElementById('root'))

此时重新渲染，并且会重新调用一遍 useState，而这时 stateQueue 已经是 ["Tom", "0"] 了，触发stateQueue[0] = stateQueue[0] || initState;，这样就把 Tom 渲染到页面上了。

这是基本的渲染过程，将下来我们看看如果加到条件语句里面是怎么渲染的：

let show = false;
function RenderFunctionComponent() {if (show) {const [name, setName] = useState("Lvan");}const [age, setAge] = useState("0");return (<div>{name}</div><div>{age}</div><Button onClick={() => setName("Tom")}>name设置为Tom</Button>);
}

很明显，如果这里加上 if 判断，那么 render 的时候，这个 index 就不能一一对应上了。

那么有的同学就会问了，为什么要用这种设计，就不能换种设计方案，比如用一个参数来对应起来。比如说 const [name, setName] = useState("name", "Lvan");，这样就可以知道我是设置 name 这个字段了而不是找 index，这样做当然可以实现。

我觉得 react 没有这样做可能有几个原因：

• 这样更简洁
• 函数式开发
• 并发性能高

总结

所以为了回答题目的问题，我们可以说因为 hooks 内部使用链表来实现。

但是，并不是因为 hooks 内部使用链表来实现，所以我们必须保证 hooks 的调用顺序。这种观点显然倒置了因果关系。

正确的说法是：因为我们为了保证了 hooks 的调用顺序（不保证就会报错），所以 hooks 内部可以使用链表来实现。

参考资料

https://www.zhihu.com/question/532521785/answer/2490282912