当前位置：首页 > news >正文

为什么不要在循环，条件或嵌套函数中调用hooks

news 2025/7/8 8:14:07

为什么不要在循环，条件或嵌套函数中调用hooks

前言
useState Hook 的工作原理
具体实现
- 1、初始化
- 2、第一次渲染
- 3、后续渲染
- 4、事件处理
- 简单代码实现
为什么顺序很重要
- Bad Component 第一次渲染
- Bad Component 第二次渲染
总结

前言

自从 React 推出 hooks 的 API 后，相信大家对新 API 都很喜欢，但是它对你如何使用它会有一些奇怪的限制。比如，React 官网介绍了 Hooks 的这样一个限制：

不要在循环，条件或嵌套函数中调用 Hook，确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

useState Hook 的工作原理

这个限制并不是 React 团队凭空造出来的，的确是由于 React Hooks 的实现设计而不得已为之。

为了让大家有一个更清晰的思维模型，我将用数组来模拟useState的简单实现。首先让我们通过一个例子来看看 hook 是如何工作的。

我们首先从一个组件开始：

function RenderFunctionComponent() {const [firstName, setFirstName] = useState("Rudi");const [lastName, setLastName] = useState("Yardley");return (<Button onClick={() => setFirstName("Fred")}>Fred</Button>);
}

useState hook 背后的思想是，你可以使用 hook 函数返回的数组的第二个数组项作为 setter 函数，并且该 setter 将控制由 hook 管理的状态。

具体实现

1、初始化

创建两个空数组：setters 和 state

将 cursor 设置为 0
请添加图片描述

2、第一次渲染

首次运行组件函数。

每次useState()调用，在第一次运行时，都会将一个 setter 函数推送到 setters 数组上，然后将一些状态推送到 state 数组上。
请添加图片描述

3、后续渲染

每次后续渲染都会重置 cursor，并且仅从每个数组中读取这些值。
请添加图片描述

4、事件处理

每个 setter 都有对其 cursor 的引用，因此通过触发对 setter 的调用，setter 它将更改状态数组中该位置的状态值。
请添加图片描述

简单代码实现

下面通过一段简单的代码示例来演示该实现。

注意：这并不是 React 的底层实现，但对于我们理解 react hook 的心智模型非常有帮助。

const state = [];
const setters = [];
let cursor = 0;function createSetter(cursor) {return function setterWithCursor(newVal) {state[cursor] = newVal;};
}export function useState(initVal) {if (state[cursor] === undefined && setters[cursor] === undefined) {state.push(initVal);setters.push(createSetter(cursor));}const setter = setters[cursor];const value = state[cursor];cursor++;return [value, setter];
}function RenderFunctionComponent() {const [firstName, setFirstName] = useState('Rudi'); // cursor: 0const [lastName, setLastName] = useState('Yardley'); // cursor: 1return (<div><button onClick={() => setFirstName('Richard')}>Richard</button><button onClick={() => setLastName('Fred')}>Fred</button></div>);
}function MyComponent() {cursor = 0; // resetting the cursorreturn <RenderFunctionComponent />; // render
}console.log(state); // Pre-render: []
MyComponent();
console.log(state); // First-render: ['Rudi', 'Yardley']
MyComponent();
console.log(state); // Subsequent-render: ['Rudi', 'Yardley']// click the 'Richard' buttonconsole.log(state); // After-click: ['Richard', 'Yardley']

为什么顺序很重要

现在，如果我们根据某些外部因素甚至组件状态更改渲染周期的钩子顺序会发生什么？

让我们做 React 团队说你不应该做的事情：

let firstRender = true;function RenderFunctionComponent() {let initName;if(firstRender){[initName] = useState("Rudi");firstRender = false;}const [firstName, setFirstName] = useState(initName);const [lastName, setLastName] = useState("Yardley");return (<Button onClick={() => setFirstName("Fred")}>Fred</Button>);
}