React Hooks

October 23, 2022

它可以让你在不编写 class 组件的情况下使用 state 以及其他 React 特性

动机

  • 在组件之间复用状态逻辑很难,render props 与高阶组件的方式需要你重新调整组件的组织结构。
  • 复杂组件变得难以理解,我们常常需要在 componentDidMountcomponentDidUpdate 中获取数据,然后在 componentWillUnmount 中取消监听等操作,相关关联且需要对照修改的代码被进行了拆分,当逻辑变多时就会变得难以维护与理解
  • 难以理解的 class,需要理解 this 的工作方式

规则

  • 不要在循环,条件或嵌套函数中调用 Hook。确保总是在 React 函数的顶层调用他们
  • 只能在 React 函数中或者其他 Hook 中调用

实现

Hooks 在每次调用时都需要保证其顺序的一致性,因此不能出现在条件语句中。