React hook 判断语句内不能使用useEffect（乱序问题）

const Parent = () => {

        const [count, setCount] = useState(0);

        // -------------------------------------------------------

        // 如果这样写控制台会报错， 原因继续往下看

        if (count > 1) {

                useEffect(() => {

                        console.log('大于1')

                }, []);

        }

// -------------------------------------------------------

// -------------------------------------------------------

// 如果这样写控制台不会报错，但不可以这么写

if (count > 1) {

        useEffect(() => {

                console.log('大于1')

        }, []);

} else {

        useEffect(() => {

                console.log('小于1')

        }, []);

}

// -------------------------------------------------------

        return

{count}

}

结论：

1. hooks渲染是从上到下依次执行，在if语句内使用的话，由于第一次未执行到useEffect，后面render时却又突然检测到了，就会导致控制台报错（可以理解成渲染时突然发现一个未知的useEffect，老版本不会报错，但是新版本将这个问题修复了所以控制台会报错）。

2. 即使在if语句后面添加else，由于第一次执行了else语句内的useEffect，且无依赖只能执行一次，所以即使后面渲染时执行了第一个useEffect（if内的），但实际上并不会去执行他，因此虽然不会报错但是代码的执行不符合我们想要的。

3. 综上所述，使用hooks时，不要在判断语句内使用useEffect。