React Hook源码解析（一）

时间  2020-04-03
标签 react hook 源码 解析 栏目 React 繁體版
原文   原文链接

本文首发于公众号：符合预期的CoyPanjavascript

写在前面

React Hook已经正式发布了一段时间了。我在项目中也进行过尝试，一个很直观的感觉：写起来很爽。可是一直没有深刻了解过其实现原理。本文将尝试从源码层面，了解React hooks的原理。本文所指的React版本为：v16.12.0html

Hook概述

Hook 是 React 16.8 的新增特性，它可让你在不编写 class 的状况下使用 state 以及其余的 React 特性。Hook的诞生，是为共享状态逻辑提供更好的原生途径。React官方文档，已经对hook进行了十分全面的介绍：reactjs.org/docs/hooks-…java

useState实现原理

Hook中使用的最多的，可能就是useState这个api。React是如何实现这个api的呢？React如何保存Hook的state？为何咱们每次调用useState的时候，均可以拿到最新的值？react

在写做文本前，我对React内部实现的了解并不够深刻，只是了解其Fiber实现及工做流程。不过我认为这对理解hook的实现原理并不会有很大的影响。api

本文将专一于这两个问题。咱们经过示例代码，调试一下react的源码。示例代码以下：函数

const App = () => {
    const [name, setName] = useState('hello');
    const [password, setPassword] = useState('world');
    return <React.Fragment>
        <input value={name} onChange={ e => setName(e.target.value) } />
        <input value={password} onChange={ e => setPassword(e.target.value) } />
    </React.Fragment>
};
复制代码

useState的入口代码：源码分析

function useState(initialState) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}
复制代码

这个dispatcher对象包含了全部的官方内置hook。this

readContext: ƒ (context, observedBits)
useCallback: ƒ (callback, deps)
useContext: ƒ (context, observedBits)
useEffect: ƒ (create, deps)
useImperativeHandle: ƒ (ref, create, deps)
useLayoutEffect: ƒ (create, deps)
useMemo: ƒ (create, deps)
useReducer: ƒ (reducer, initialArg, init)
useRef: ƒ (initialValue)
useState: ƒ (initialState)
useDebugValue: ƒ (value, formatterFn)
useResponder: ƒ (responder, props)
useDeferredValue: ƒ (value, config)
useTransition: ƒ (config)
复制代码

先暂时无论这个dispatcher是怎么来的，咱们接着看下useState的内部逻辑。spa

组件初次挂载时

React处理渲染带有hook的组件的核心函数为：renderWithHooks。3d

咱们来看看再返回[name, setName]以前，都经历了哪些步骤：

...
  // 组件挂载时，生成一个hook对象
  var hook = mountWorkInProgressHook(); 

	// 初始state绑在hook对象上
  if (typeof initialState === 'function') {
    initialState = initialState();
  }
  hook.memoizedState = hook.baseState = initialState;
	
	// 记录hook值的改变
  var queue = hook.queue = {
    last: null,
    dispatch: null,
    lastRenderedReducer: basicStateReducer,
    lastRenderedState: initialState
  };

	// 生成 更改状态的方法。
	// 这里的 currentlyRenderingFiber$1是一个全局变量，表示当前正在渲染的Fiber节点。这个很重要，一下子再说。
  var dispatch = queue.dispatch = dispatchAction.bind(null,currentlyRenderingFiber$1, queue);
  return [hook.memoizedState, dispatch];
	...
复制代码

首先来看hook对象是如何生成：

function mountWorkInProgressHook() {
  
  // 初始化的hook对象
  var hook = {
    memoizedState: null, // 当前的state值
    baseState: null, 
    queue: null,
    baseUpdate: null,
    next: null
  };

  // workInProgressHook是一个全局变量，表示当前正在处理的hook
  if (workInProgressHook === null) {
    firstWorkInProgressHook = workInProgressHook = hook;
  } else {
    workInProgressHook = workInProgressHook.next = hook;
  }

  return workInProgressHook;
}
复制代码

从上面的代码能够看到，hook实际上是以链表的形式存储起来的。每个hook都有一个指向下一个hook的指针。若是咱们在组件代码中声明了多个hook，那这些hook对象之间是这样排列的：

hookA.next = hookB;
hookB.next = hookC;
...
复制代码

React会把hook对象挂到Fiber节点的memoizedState属性上：

var renderedWork = currentlyRenderingFiber$1;
renderedWork.memoizedState = firstWorkInProgressHook;
复制代码

在本文的例子中，组件挂载完毕后，其Fiber对象上的memoizedState属性值以下：

setState

组件初次挂载完成了，咱们在页面进行输入时，hook是如何工做的呢？即，[name, setName]=useState('')中的setName都干了什么。

上文已经提到了，hook中的setName是这样来的

var dispatch = queue.dispatch = dispatchAction.bind(null, currentlyRenderingFiber$1, queue);
复制代码

咱们调用setName的时候，事实上就是执行了这个dispatchAction。

在dispatchAction中，会进行render的调度处理，同时，会存储这次更新的信息：

...
    // 记录更新信息
		var _update2 = {
      expirationTime: expirationTime,
      suspenseConfig: suspenseConfig,
      action: action,
      eagerReducer: null,
      eagerState: null,
      next: null
    };

		...
    
		// 这里的queue，是以前传入的hook对象中的queue。这里保留了一个引用，很重要。
    var last = queue.last;

		// 更新链表
    if (last === null) {
      // This is the first update. Create a circular list.
      _update2.next = _update2;
    } else {
      var first = last.next;

      if (first !== null) {
        // Still circular.
        _update2.next = first;
      }

      last.next = _update2;
    }
    queue.last = _update2;

		// 接下来，交给React去调度处理
    ...
复制代码

通过React的调度，会带上action（setName的传参），再次进入hook组件核心渲染逻辑：renderWithHooks。此时，因为并不是首次渲染组件，React会使用另一个挂载有全局hook函数的对象上的useState。在这个useState中，会使用一个叫作updateState的函数来计算最新的state值。而这个updateState的代码很简单：

function updateState(initialState) {
  return updateReducer(basicStateReducer, initialState);
}
复制代码

先看这个basicStateReducer, 也很简单：

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

就是实现了一个reducer的功能，经过传入的state的action，计算出最新的state。这里的代码告诉咱们，咱们其实能够传入一个函数做为userState的参数，经过函数返回最新的state。

咱们继续深刻updateReducer的代码：

function updateReducer(reducer, initialArg, init) {
  
  // 经过fiber节点的memoizedState属性拿到当前hook。
  var hook = updateWorkInProgressHook();
  var queue = hook.queue;

  queue.lastRenderedReducer = reducer;

  // 这里是为了处理当前render周期中，再次触发render的问题，先暂时忽略这个条件分支。
  if (numberOfReRenders > 0) {
    ...
  } 

	// 最近的一次更新
  var last = queue.last; 

  var baseUpdate = hook.baseUpdate;
  var baseState = hook.baseState; // Find the first unprocessed update.

  var first;

  if (baseUpdate !== null) {
    if (last !== null) {
      // For the first update, the queue is a circular linked list where
      // `queue.last.next = queue.first`. Once the first update commits, and
      // the `baseUpdate` is no longer empty, we can unravel the list.
      last.next = null;
    }

    first = baseUpdate.next;
  } else {
    first = last !== null ? last.next : null;
  }

  if (first !== null) {
    var _newState = baseState;
    var newBaseState = null;
    var newBaseUpdate = null;
    var prevUpdate = baseUpdate;
    var _update = first;
    var didSkip = false;

    // 调度，获取最新的state
    do {
      var updateExpirationTime = _update.expirationTime;

      if (updateExpirationTime < renderExpirationTime$1) {
        // react调度代码，省略
        ...
      } else {
        ...
        if (_update.eagerReducer === reducer) {
          // If this update was processed eagerly, and its reducer matches the
          // current reducer, we can use the eagerly computed state.
          _newState = _update.eagerState;
        } else {
          // 经过reducer计算出最新的state
          var _action = _update.action;
          _newState = reducer(_newState, _action);
        }
      }
      prevUpdate = _update;
      _update = _update.next;
    } while (_update !== null && _update !== first);

    ...

    hook.memoizedState = _newState;
    hook.baseUpdate = newBaseUpdate;
    hook.baseState = newBaseState;
    queue.lastRenderedState = _newState;
    
  }
  var dispatch = queue.dispatch;
  return [hook.memoizedState, dispatch];
}
复制代码
小结

咱们以示例代码，简单分析了一下hook的内部原理。回到咱们开始提出的问题，React如何保存Hook的state？为何咱们每次调用useState的时候，均可以拿到最新的值？如今能够简单总结一下了：

在执行useState的时候，react会在组件的Fiber节点上，按照useState的前后顺序，以链表的方式建立hook，而且将state和该state对应的更新函数返回。更新时，会顺着链表，依次计算最新的state值返回。

用一个图总结一下：

上面的图，也很好的解释了为何不容许在条件分支中使用hook。useState执行一次，链表才会前进到下一个节点。若是中途某个节点断了，那么state就对应不起来了，代码天然就出Bug了。

写在后面

本文从源码角度，阐述了hook的大概实现原理。其中有一些分支逻辑以及hook中的反作用等将在后续的文章中进行解析。本人第一次写源码分析，有不恰当的地方请多指教。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程