将useState用起来：30分钟上手，快速学到新知识！
2023-09-15 12:18:26
写在前面
在进行本文讲解前，我们先从宏观上来阐述一下React Hook，让大家对它有一个初步的概念：
React Hook 规则
在React Hook的使用过程中，我们需要注意以下两条规则：
- 只能在React函数中调用。
- 只能在组件的顶层调用。
至于为什么会有这两条规则，让我们在了解了useState之后再来继续这个话题。
useState 概述
React Hook useState是一个用于管理状态的函数，其作用与类的setState方法相同，用于更新组件状态。
它有两个参数：
- 初始状态: 初始状态是指组件第一次渲染时的状态值。
- 状态更新函数: 当组件状态发生变化时，该函数会被调用，以便更新组件状态。
const [state, setState] = useState(initialState);
如何实现一个简易的useState？
下面，我们就来手把手实现一个简易的useState。
function useState(initialState) {
let state = initialState;
const setState = (newState) => {
state = newState;
};
return [state, setState];
}
简易版useState实现后，我们就可以在组件中使用它来管理状态了：
const MyComponent = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Click me</button>
</div>
);
};
为什么会有规则
通过以上实现，我们发现简易版的useState没有遵循React Hook的规则。虽然我们仍然可以实现状态管理的功能，但这样的写法并不符合React的设计理念。
React Hook被设计成只能在React函数中调用，是因为它与React组件的生命周期紧密相关。当组件挂载时，useState会被调用并初始化状态；当组件更新时，useState会被再次调用，以更新组件状态。
如果允许在非React函数中调用useState，就无法保证状态管理的正确性。例如，如果我们在一个类组件中调用useState，当组件更新时，useState可能会被调用两次，从而导致状态不一致。
至于为什么只能在组件的顶层调用useState，是因为useState会创建了一个依赖项数组。当组件更新时，这个数组会用于比较旧的状态和新的状态。如果useState被调用了不止一次，那么数组中的依赖项可能会不一致，从而导致状态更新不正确。
结束语
至此，我们就讨论了如何将useState应用到自己的项目中，也了解了规则存在的意义。在今后的开发中，我们可以熟练地使用useState进行状态管理，也可以深刻地理解React Hook的设计理念，更好地构建可维护、可扩展的React组件。
