网站建设对企业的作用,东营城镇建设规划网站,网站备案的幕布,彩票网站net网站开发找那家为什么不要在循环#xff0c;条件或嵌套函数中调用hooks 前言useState Hook 的工作原理具体实现1、初始化2、第一次渲染3、后续渲染4、事件处理简单代码实现 为什么顺序很重要Bad Component 第一次渲染Bad Component 第二次渲染 总结 前言
自从 React 推出 hooks 的 API 后条件或嵌套函数中调用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 (divbutton onClick{() setFirstName(Richard)}Richard/buttonbutton 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);
}
这里我们有useState的一个条件调用。让我们看看这对系统造成的破坏。
Bad Component 第一次渲染 我们的实例变量firstName和lastName包含正确的数据但让我们看看第二次渲染会发生什么
Bad Component 第二次渲染 现在firstName和lastName发生了错位我们的状态存储变得不一致了。这就是为什么保持正确顺序的重要性。
总结
通过对 useState 的简单实现来理解 react hooks 的幕后实现逻辑。考虑将状态作为一组数组存在的模型那么我们不该违反其对应的使用规则。
