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 <div>{count}</div>
}
结论:
1. hooks渲染是从上到下依次执行,在if语句内使用的话,由于第一次未执行到useEffect,后面render时却又突然检测到了,就会导致控制台报错(可以理解成渲染时突然发现一个未知的useEffect,老版本不会报错,但是新版本将这个问题修复了所以控制台会报错)。
2. 即使在if语句后面添加else,由于第一次执行了else语句内的useEffect,且无依赖只能执行一次,所以即使后面渲染时执行了第一个useEffect(if内的),但实际上并不会去执行他,因此虽然不会报错但是代码的执行不符合我们想要的。
3. 综上所述,使用hooks时,不要在判断语句内使用useEffect。