useState为什么不能放到条件语句里面？

1. 背景

首先我们来看一段代码：

import React, { useState } from 'react'

let showSex = true
function Example2(){
    const [ age, setAge ] = useState(18);
    if(showSex){
        const [ sex, setSex ] = useState('男');
        showSex = false;
    }
    const [ work, setWork ] = useState('前端');
    return (
        <div>
           <p>{age}岁</p>
           <p>{sex}</p>
           <p>{work}</p>
        </div>
    )
}

export default Example2;

这样写貌似看上去没问题，结果却是会造成页面报错：

报错信息显示useState不能放到条件语句中。这时候大家可能就会产生疑惑了，为什么useState不能放到条件语句中呢？

2. useState为什么不能放到条件语句里面？

这是因为React通过单链表来管理Hooks。

update 阶段，每次调用 useState，链表就会执行 next 向后移动一步。如果将 useState 写在条件判断中，假设条件判断不成立，没有执行里面的 useState 方法，会导致接下来所有的 useState 的取值出现偏移，从而导致异常发生。

参考博客：
https://zhuanlan.zhihu.com/p/304213203
https://juejin.cn/post/6844904080758800392