react-reconsiler模块 - React源码解析（四

React Hooks
React到目前为止已经内置了15种钩子：

• useState
• useReducer
• useContext
• useRef
• useEffect
• useLayoutEffect
• useCallback
• useMemo
• useImperativeHandle
• useDebugValue
• useResponder
• useDeferredValue
• useTransition
• useMutableSource
• useOpaqueIdentifier

当然，比较常用的还是那几个：useState、useContext、useRef、useCallback、useMemo、useImperativeHandle、useReducer(其实这个我不怎么用的，主要是框架中已经集成了Redux啦，没有集成Redux的项目建议用用)。

前面，我们已经知道Hook是在renderWithHooks函数中被处理的。其实呢，React处理Hooks是分不同时期的，这就在src/ReactFiberHooks.js中定义了四种Dispatcher(当然这是除去Dev那几种重复的之外啦)：

• ContextOnlyDispatcher，这个时期只能readContext，其他的都会爆出异常
• HooksDispatcherOnMount，这个是在组件挂载阶段，其实也就是组件第一次执行到Hook时使用的。
• HooksDispatcherOnUpdate，这个是在完成第一次Hook执行之后，使用的方法。
• HooksDispatcherOnRerender，这个好像是在render期间触发的hooks执行。
  所以呢，我们在使用useState(或其他钩子函数)的时候其实第一次执行的逻辑和后面执行的逻辑可能是不一样的。就比如下面的代码：

const Todo = () => {
  const [title, setTitle] = useState(null)
  ...
}

同一个Todo实例，在第一次执行时执行的是一个叫rerenderState函数的代码，而组件更新的时候执行的是updateState的代码。