前言
在 React 中,Hooks 不能写在条件语句中,如下面这段代码点击button后则会报错。
javascript
import { useEffect, useState } from "react"
export default () => {
const [count, setCount] = useState(0)
if (count > 0) {
useEffect(() => {
console.log("xxx")
}, [])
}
const [name, setName] = useState("田本初")
return (
<>
{count}
<button onClick={() => setCount(count + 1)}>+1</button>
</>
)
}
原因
React 通过一个内部的调用栈
来跟踪每个 Hook 在组件中的位置。Hooks 依赖于调用顺序
来管理它们的内部状态。当组件重新渲染时,React 可以根据这个顺序正确地恢复每个 Hook 的状态。打破这一顺序可能会导致 React 无法正确地恢复和管理组件的状态,从而引发错误。
结合上面报错截图可以理解为:
Previous render
: 上一次渲染时,React 期望 Hook 的调用顺序是:useState => useState
Next render
: 下一次渲染时,React 检测到的实际 Hook 调用顺序是:useState => useEffect
在这个例子中,当 count 大于 0 时,useEffect 会被调用,但当 count 等于 0 时,useEffect 就不会被调用。这样,useEffect 和 useState 的调用顺序
就会不同步
,React 会混淆 Hook 的位置,进而导致状态错乱
。
解决方案
为了确保 Hooks 调用顺序的一致性,React 官方建议遵循以下规则:
1.只在顶层调用
Hooks:不要在循环、条件语句或嵌套函数中调用 Hooks。确保每次渲染时,Hooks 都以相同的顺序调用。
2.只在 React 函数组件或自定义 Hook 中调用 Hooks:不要在普通的 JavaScript 函数中使用 Hooks。
总结
Hooks 依赖调用顺序
来管理组件状态,因此它们必须在组件的顶层调用
,不能在条件语句或循环中使用。确保 React 能够正确地跟踪和管理状态。