Hooks 原理

2023-07-19 10:39:41

Hooks 出现本质上的原因

• 让函数组件也能做类组件的事，有自己的状态、可以处理副作用、获取 ref、数据缓存...

• 逻辑复用

• 面向函数式编程

hooks 对象

hooks 对象本质上是主要以三种处理策略存在 react 中

• ContextOnlyDispatcher ：防止开发者在函数组件外部调用 hooks，开发者调用了这个形态下的 hooks 就会抛出异常。

• HooksDispatcherOnMount ：函数组件初始化 mount，初次建立 hooks 与 fiber 之间的关系。

• HooksDispatcherOnUpdate ：函数组件的更新，建立 hooks 与 fiber 之间的关系后当 组件更新时需要 hooks 去获取或者更新维护状态。

一个 hooks 对象应该是下面这样 👇🏻

// 函数组件初始化用的 hooks
const HooksDispatcherOnMount = {
  useState: mountState,
  useEffect: mountEffect,
  ...
}
// 函数组件更新用的 hooks
const HooksDispatcherOnUpdate = {
  useState:updateState,
  useEffect: updateEffect,
  ...
}
// 当hooks不是函数内部调用的时候，调用这个hooks对象下的hooks，所以报错
const ContextOnlyDispatcher = {
  useEffect: throwInvalidHookError,
  useState: throwInvalidHookError,
  ...
}