React Hooks 源码解析（译）

咱们都知道，新的React Hook系统在社区中引发的反响很大。咱们已经尝试和测试过，而且对它及其潜力感到十分兴奋。当你想到hooks时会以为他们很神奇，不暴露你的实例，React就能管理你的组件（不使用this关键字）。那么React究竟是怎么作到的呢？

今天我将会深刻React hooks的实现来让咱们更加了解它。这个神奇的特性存在的问题是，一旦出现问题就很难调试，由于它有复杂的堆栈跟踪支持。所以，经过深刻理解React hooks的系统，咱们就能够在遇到问题时很是快的解决它们，甚至能够提早避免错误发生。

在我开始以前，我首先要声明我并非React的开发者/维护者，所以，你们不要太信任个人观点。我确实很是深刻地研究了React hooks的实现，可是不管如何我也不能保证这就是hooks的实际实现原理。话虽如此，我已经用React源码来支持个人观点，并尝试着使个人论点尽量的真实。

首先，让咱们进入须要确保hooks在React的做用域调用的机制，由于你如今可能知道若是在没有正确的上下文调用钩子是没有意义的：

The dispatcher

dispatcher 是包含了hooks函数的共享对象。它将根据ReactDom的渲染阶段来动态分配或者清除，而且确保用户没法在 React 组件外访问hooks。请参阅实现

咱们能够在渲染根组件前经过简单的切换来使用正确的dispatcher，用一个叫作enableHooks的标志来开启/禁用；这意味这从技术上来讲，咱们能够在运行时开启/禁用挂钩。React 16.6.x就已经有了试验性的实现，只不过它是被禁用的。请参阅实现

当咱们执行完渲染工做时，咱们将dispatcher 置空从而防止它在ReactDOM的渲染周期以外被意外调用。这是一种能够确保用户不作傻事的机制。请参阅实现

dispatcher 在每个 hook 调用中 使用resolveDispatcher()这个函数来调用。就像我以前说的，在React的渲染周期以外调用是毫无心义的，而且React会打印出警告信息“Hooks只能在函数组件的主体内部调用”请参照实现

let currentDispatcher
const dispatcherWithoutHooks = { /* ... */ }
const dispatcherWithHooks = { /* ... */ }

function resolveDispatcher() {
  if (currentDispatcher) return currentDispatcher
  throw Error("Hooks can't be called")
}

function useXXX(...args) {
  const dispatcher = resolveDispatcher()
  return dispatcher.useXXX(...args)
}

function renderRoot() {
  currentDispatcher = enableHooks ? dispatcherWithHooks : dispatcherWithoutHooks
  performWork()
  currentDispatcher = null
}
复制代码

到此为止既然咱们已经看过了这种简单的封装机制，我但愿咱们转到本文的核心 - Hooks。我想向您介绍一个新概念：

The hooks queue

在使用场景以后，hooks表示为在调用顺序下连接在一块儿的节点。它们被表示成这样是由于hooks并非简单的建立而后又把它遗留下来。它们有一种可让他们变成它们本身的机制。一个Hook有几个我但愿你能够在深刻研究实现以前记住的属性：

1. 它的初始状态在首次渲染时被建立。
2. 她的状态能够即时更新。
3. React会在以后的渲染中记住hook的状态
4. React会根据调用顺序为您提供正确的状态
5. React会知道这个hook属于哪一个Fiber。

所以，咱们须要从新思考咱们查看组件状态的方式。到目前为止，咱们认为它就像是一个普通的对象：

{
  foo: 'foo',
  bar: 'bar',
  baz: 'baz',
}
复制代码

可是在处理hook时，它应该被视为一个队列，其中每一个节点表明一个状态的单个模型：

{
  memoizedState: 'foo',
  next: {
    memoizedState: 'bar',
    next: {
      memoizedState: 'bar',
      next: null
    }
  }
}
复制代码

能够在实现中查看单个hook节点的模式。你会看到hook有一些额外的属性，可是理解钩子如何工做的关键在于memoizedState和next。其他属性由useReducer()hook专门用于缓存已经调度的操做和基本状态，所以在各类状况下，还原过程能够做为后备重复： · baseState - 将给予reducer的状态对象。 · baseUpdate- 最近的建立了最新baseState的调度操做。 · queue - 调度操做的队列，等待进入reducer。

不幸的是，我没有设法很好地掌握reducer hook，由于我没有设法重现任何边缘状况，因此我不以为舒服去精心设计。我只能说，reducer 的实现是如此不一致，在代码注释中甚至指出，“不知道这些是否都是所需的语义”; 因此我该如何肯定？！

因此回到hooks，在每一个函数组件调用以前，将调用一个名为prepareHooks()的函数，其中当前fiber及其hooks队列中的第一个hook节点将被存储在全局变量中。这样，只要咱们调用一个hook函数（useXXX()），就会知道要在哪一个上下文中运行。

let currentlyRenderingFiber
let workInProgressQueue
let currentHook

// Source: https://github.com/facebook/react/tree/5f06576f51ece88d846d01abd2ddd575827c6127/react-reconciler/src/ReactFiberHooks.js:123
function prepareHooks(recentFiber) {
  currentlyRenderingFiber = workInProgressFiber
  currentHook = recentFiber.memoizedState
}

// Source: https://github.com/facebook/react/tree/5f06576f51ece88d846d01abd2ddd575827c6127/react-reconciler/src/ReactFiberHooks.js:148
function finishHooks() {
  currentlyRenderingFiber.memoizedState = workInProgressHook
  currentlyRenderingFiber = null
  workInProgressHook = null
  currentHook = null
}

// Source: https://github.com/facebook/react/tree/5f06576f51ece88d846d01abd2ddd575827c6127/react-reconciler/src/ReactFiberHooks.js:115
function resolveCurrentlyRenderingFiber() {
  if (currentlyRenderingFiber) return currentlyRenderingFiber
  throw Error("Hooks can't be called")
}
// Source: https://github.com/facebook/react/tree/5f06576f51ece88d846d01abd2ddd575827c6127/react-reconciler/src/ReactFiberHooks.js:267
function createWorkInProgressHook() {
  workInProgressHook = currentHook ? cloneHook(currentHook) : createNewHook()
  currentHook = currentHook.next
  workInProgressHook
}

function useXXX() {
  const fiber = resolveCurrentlyRenderingFiber()
  const hook = createWorkInProgressHook()
  // ...
}

function updateFunctionComponent(recentFiber, workInProgressFiber, Component, props) {
  prepareHooks(recentFiber, workInProgressFiber)
  Component(props)
  finishHooks()
}
复制代码

一旦更新完成，一个叫作finishHooks()的函数将被调用，其中hooks队列中第一个节点的引用将存储在渲染完成的fiber对象的memoizedState属性中。这意味着hooks队列及其状态能够在外部被定位到：

const ChildComponent = () => {
  useState('foo')
  useState('bar')
  useState('baz')

  return null
}

const ParentComponent = () => {
  const childFiberRef = useRef()

  useEffect(() => {
    let hookNode = childFiberRef.current.memoizedState

    assert(hookNode.memoizedState, 'foo')
    hookNode = hooksNode.next
    assert(hookNode.memoizedState, 'bar')
    hookNode = hooksNode.next
    assert(hookNode.memoizedState, 'baz')
  })

  return (
    <ChildComponent ref={childFiberRef} /> ) } 复制代码

让咱们更具体一点，谈谈各个hooks，从最多见的state hook开始：

State hooks

你将惊讶的了解到useState hook使用的useReducer只是为它提供了一个预约义的reducer处理程序请参阅实现。这意味着实际上useState返回的结果是一个reducer状态和一个action dispatcher。我但愿你看一下state hook使用的reducer处理程序：

function basicStateReducer(state, action) {
  return typeof action === 'function' ? action(state) : action;
}
复制代码

正如预期的那样，咱们能够直接为action dispatcher提供新的状态; 但你会看那个吗？！咱们还能够为dispatcher提供一个动做函数，该函数将接收旧状态并返回新状态。这意味着，当你将状态设置器传递到子组件时，你能够改变当前父组件的状态，不须要做为一个不一样的prop传递下去。举个例子：

const ParentComponent = () => {
  const [name, setName] = useState()
  
  return (
    <ChildComponent toUpperCase={setName} /> ) } const ChildComponent = (props) => { useEffect(() => { props.toUpperCase((state) => state.toUpperCase()) }, [true]) return null } 复制代码

最后，effect hooks  - 它对组件的生命周期及其工做方式产生了重大影响：

Effect hooks

Effect hooks 的行为略有不一样，而且有一个额外的逻辑层，我接下来会解释。一样，在我深刻了解实现以前，我但愿你能记住effect hooks的属性：

1. 它们是在渲染时建立的，但它们在绘制后运行。
2. 它们将在下一次绘制以前被销毁。
3. 它们按照已经被定义的顺序执行。

请注意，我使用的是“绘制”术语，而不是“渲染”。这两个是不一样的东西，我看到最近React Conf中的许多发言者使用了错误的术语！即便在官方的React文档中，他们也会说“在渲染屏幕以后”，在某种意义上应该更像“绘制”。render方法只建立fiber节点，但没有绘制任何东西。

所以，应该有另外一个额外的队列保持这些effect，并应在绘制后处理。通常而言，fiber保持包含effect节点的队列。每种effect都是不一样的类型，应在适当的阶段处理：

· 在变化以前调用实例的getSnapshotBeforeUpdate()方法请参阅实现。 ·执行全部节点的插入，更新，删除和ref卸载操做请参阅实现。 ·执行全部生命周期和ref回调。生命周期做为单独的过程发生，所以整个树中的全部放置，更新和删除都已经被调用。此过程还会触发任何特定渲染的初始effects请参阅实现。 ·由useEffect() hook 安排的effects - 基于实现也被称为“passive effects” （也许咱们应该在React社区中开始使用这个术语？！）。

当涉及到hook effects时，它们应该存储在fiber的一个名为 updateQueue的属性中，而且每一个effect node应该具备如下模式请参阅实现：

· tag - 一个二进制数，它将决定effect的行为（我将尽快阐述）。 · create- 绘制后应该运行的回调。 · destroy- 从create()返回的回调应该在初始渲染以前运行。 · inputs - 一组值，用于肯定是否应销毁和从新建立effect。 · next - 函数组件中定义的下一个effect的引用。

除了tag属性外，其余属性都很是简单易懂。若是你已经很好地研究了hooks，你就会知道React为你提供了几个特殊的hooks：useMutationEffect()和useLayoutEffect()。这两种效果在内部使用useEffect()，这实际上意味着它们建立了一个effect节点，但它们使用不一样的tag值。

标签由二进制值组合而成请参阅实现：

const NoEffect = /* */ 0b00000000;
const UnmountSnapshot = /* */ 0b00000010;
const UnmountMutation = /* */ 0b00000100;
const MountMutation = /* */ 0b00001000;
const UnmountLayout = /* */ 0b00010000;
const MountLayout = /* */ 0b00100000;
const MountPassive = /* */ 0b01000000;
const UnmountPassive = /* */ 0b10000000;
复制代码

这些二进制值的最多见用例是使用管道（|）将这些位按原样添加到单个值。而后咱们可使用＆符号（&）检查标签是否实现某种行为。若是结果为非零，则表示tag实现了指定的行为。

如下是React支持的hook effect类型及其标签请参阅实现：

Default effect — UnmountPassive | MountPassive. Mutation effect — UnmountSnapshot | MountMutation. Layout effect — UnmountMutation | MountLayout. 如下是React如何检查行为实现请参阅实现：

if ((effect.tag & unmountTag) !== NoHookEffect) {
  // Unmount
}
if ((effect.tag & mountTag) !== NoHookEffect) {
  // Mount
}
复制代码

所以，基于咱们刚刚学到的关于effect hooks的内容，咱们实际上能够在外部向某个fiber注入effect：

function injectEffect(fiber) {
  const lastEffect = fiber.updateQueue.lastEffect

  const destroyEffect = () => {
    console.log('on destroy')
  }

  const createEffect = () => {
    console.log('on create')

    return destroy
  }

  const injectedEffect = {
    tag: 0b11000000,
    next: lastEffect.next,
    create: createEffect,
    destroy: destroyEffect,
    inputs: [createEffect],
  }

  lastEffect.next = injectedEffect
}

const ParentComponent = (
  <ChildComponent ref={injectEffect} /> ) 复制代码

就是这样！你从这篇文章中最大的收获是什么？你将如何在你的React应用程序中使用这些新知识？很想看到有趣的评论！

medium.com/the-guild/u…