为了账号安全,请及时绑定邮箱和手机立即绑定

React Hook源码解析(一)

ID: 符合预期的CoyPan
CoyPan,BAT某厂符合预期的FE,正努力成为一名出色的工程师

写在前面

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

Hook概述

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

useState实现原理

Hook中使用的最多的,可能就是useState这个api。React是如何实现这个api的呢?React如何保存Hook的state?为什么我们每次调用useState的时候,都可以拿到最新的值?

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

本文将专注于这两个问题。我们通过示例代码,调试一下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。

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的内部逻辑。

组件初次挂载时

React处理渲染带有hook的组件的核心函数为:renderWithHooks

我们来看看再返回[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中的副作用等将在后续的文章中进行。本人第一次写源码分析,有不恰当的地方请多指教。

点击查看更多内容
7人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
12
获赞与收藏
119

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消