React · 单选题 · 第 44 题
前端与全栈开发面试 · 第 44 题
为什么 React Hooks 不能写在条件语句或循环里?
- A条件语句里的代码会被 Babel 删除,写在里面的 Hooks 在编译时就会被丢掉
- BHooks 只能在类组件中使用,所以必须写在 render 方法顶部而不能写在条件里
- CReact 依靠 Hooks 每次渲染的调用顺序来对应各自的状态,顺序变了状态就会错位
- D写在条件里的 Hooks 会在每次渲染时都创建一个全新的组件实例,导致内存泄漏
答案
C C. React 依靠 Hooks 每次渲染的调用顺序来对应各自的状态,顺序变了状态就会错位
解析
React 用一个链表按调用顺序保存每个 Hook 的状态,第 N 次调用 useState 就取第 N 个节点。如果某次渲染跳过了一个 Hook,后面的 Hook 都会拿到错误的状态。所以 Hooks 只能在函数组件或自定义 Hook 的顶层调用,eslint-plugin-react-hooks 会检查这一点。