理解React Hooks

505 阅读1分钟

对React hook的理解,它的实现原理是什么

  • Hooks是React16.8的新特性。可以在不编写class情况下使用state以及其它的React特性
  • Hooks主要是利用闭包来保存状态,使用链表保存一系列Hooks,将链表中的第一个Hook与fiber关联。在Fiber树更新时,就能从Hooks中计算出输出状态或执行相关的副作用。
  • 注意事项
    • 不要在循环、条件或嵌套函数中调用Hooks
    • 只在React函数中调用Hooks

为什么useState要使用数组而不是对象

  1. 如果useState返回的是数组,那么使用者可以对数组中的元素命名,代码看起来也比较干净

  2. 如果useState返回的是对象,在解构对象的时候必须要和useState内部实现返回的对象同名,向要使用多次的话,必须设置别名才能使用返回值

  • 总结:是为了降低使用的复杂度,返回数组的话可以直接根据顺序解构,而返回对象使用多次就需要定义别名

React Hook解决了哪些问题?

  1. 在组件之间复用状态逻辑很难

  2. 复杂组件变的难以理解

    • 每个生命周期常常包含一些不相关的逻辑,完全不相关的代码在同一个方法中组合在一起,容易产生bug,并且导致逻辑不一致
  3. 难以理解的class