reactjs - React:在循环和嵌套函数中调用 Hook 的错误示例
问题描述
Hooks 的第一条规则是只在顶层调用 Hooks,即“不要在循环、条件或嵌套函数中调用 Hooks”。文档通过在 conditions 中调用 Hooks 的示例非常清楚地解释了,但对于其他两种情况则没有:循环和嵌套函数。
在循环和嵌套函数中调用 Hooks 时,是否有可能出现问题的示例?此外,自定义钩子不只是一个嵌套函数吗?
解决方案
可变长度循环示例:
const {useState} = React
const WrongLoop = () => {
const [count, setCount] = useState(1)
for (let i = 0; i < count; i++) {
const [x, setX] = useState(i)
}
const [unknownOrder, setUnknownOrder] = useState('some state')
return <button onClick={() => setCount(c => c+ 1)}>{count} {unknownOrder}</button>
}
ReactDOM.render(<WrongLoop />, document.getElementById('root'))
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
eslint 难以检测到的嵌套函数示例(自定义钩子是一种特殊情况 - 当use...
在函数名中使用前缀时,它在组件中的用法可以通过 eslint 进行静态分析):
const {useState} = React
const fn = () => {
const [x, setX] = useState() // is it OK to use hooks unconditionally here?
}
const WrongFn = () => {
const [count, setCount] = useState(1)
if (count === 1) {
fn() // OK to use normal functions conditionally.. but what if there's a hook inside?
}
const [unknownOrder, setUnknownOrder] = useState('some state')
return <button onClick={() => setCount(c => c+ 1)}>{count} {unknownOrder}</button>
}
ReactDOM.render(<WrongFn />, document.getElementById('root'))
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>