React Hooks
October 23, 2022
它可以让你在不编写 class 组件的情况下使用 state 以及其他 React 特性
动机
- 在组件之间复用状态逻辑很难,render props 与高阶组件的方式需要你重新调整组件的组织结构。
- 复杂组件变得难以理解,我们常常需要在
componentDidMount
与componentDidUpdate
中获取数据,然后在componentWillUnmount
中取消监听等操作,相关关联且需要对照修改的代码被进行了拆分,当逻辑变多时就会变得难以维护与理解 - 难以理解的 class,需要理解
this
的工作方式
规则
- 不要在循环,条件或嵌套函数中调用 Hook。确保总是在 React 函数的顶层调用他们
- 只能在 React 函数中或者其他 Hook 中调用
实现
Hooks 在每次调用时都需要保证其顺序的一致性,因此不能出现在条件语句中。