精读《setState 做了什么》

Posted 2021-02-02 lalalagq

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了精读《setState 做了什么》相关的知识，希望对你有一定的参考价值。

1 引言

setState 是 React 框架最常用的命令，它是用来更新状态的，这也是 React 框架划时代的功能。

但是 setState 函数是 react 包导出的，他们又是如何与 react-dom react-native react-art 这些包结合的呢？

通过 how-does-setstate-know-what-to-do 这篇文章，可以解开这个秘密。

2 概述

setState 函数是在 React.Component 组件中调用的，所以最自然的联想是，更新 DOM 的逻辑在 react 包中实现。

但是 react 却可以和 react-dom react-native react-art 这些包打配合，甚至与 react-dom/server 配合在服务端运行，那可以肯定 react 包中不含有 DOM 更新逻辑。

所以可以推断，平台相关的 UI 更新逻辑分布在平台相关的包里，react 包只做了代理。

React 引擎不在 react 包里

从 react 0.14 版本之后，引擎代码就从 react 包中抽离了，react 包仅仅做通用接口抽象。

也就是说，react 包定义了标准的状态驱动模型的 API，而 react-dom react-native react-art 这些包是在各自平台的具体实现。

各平台具体的渲染引擎实现被称为 reconciler，通过这个链接可以看到 react-dom react-native react-art 这三个包的 reconciler 实现。

这说明了 react 包仅告诉你 React 拥有哪些语法，而并不关心如何实现他们，所以我们需要结合 react 包与 react-xxx 一起使用。

对于 context，react 包仅仅会做如下定义：


// A bit simplified
function createContext(defaultValue) {
  let context = {
    _currentValue: defaultValue,
    Provider: null,
    Consumer: null
  };
  context.Provider = {
    $$typeof: Symbol.for("react.provider"),
    _context: context
  };
  context.Consumer = {
    $$typeof: Symbol.for("react.context"),
    _context: context
  };
  return context;
}

具体用到时，由 react-dom 和 react-native 决定用何种方式实现 MyContext.Provider 这个 API。

这也说明了，如果你不同步升级 react 与 react-dom 版本的话，就可能碰到这样的报错：fail saying these types are invalid，原因是 API 定义与实现不匹配。

setState 怎么调用平台实现

每个平台对 UI 更新逻辑的实现，会封装在 updater 函数里，所以不同平台代码会为组件添加各自的 updater 实现：


// Inside React DOM
const inst = new YourComponent();
inst.props = props;
inst.updater = ReactDOMUpdater;

// Inside React DOM Server
const inst = new YourComponent();
inst.props = props;
inst.updater = ReactDOMServerUpdater;

// Inside React Native
const inst = new YourComponent();
inst.props = props;
inst.updater = ReactNativeUpdater;

不同于 props, updater 无法被直接调用，因为这个 API 是由 react 引擎在 setState 时调用的：


// A bit simplified
setState(partialState, callback) {
  // Use the `updater` field to talk back to the renderer!
  this.updater.enqueueSetState(this, partialState, callback);
}

关系可以这么描述：react -> setState -> updater <- react-dom 等。

Hooks

Hooks 的原理与 setState 类似，当调用 useState 或 useEffect 时，其内部调用如下：


// In React (simplified a bit)
const React = {
  // Real property is hidden a bit deeper, see if you can find it!
  __currentDispatcher: null,

  useState(initialState) {
    return React.__currentDispatcher.useState(initialState);
  },

  useEffect(initialState) {
    return React.__currentDispatcher.useEffect(initialState);
  }
  // ...
};

ReactDOM 提供了 __currentDispatcher（简化的说法）:


// In React DOM
const prevDispatcher = React.__currentDispatcher;
React.__currentDispatcher = ReactDOMDispatcher;
let result;
try {
  result = YourComponent(props);
} finally {
  // Restore it back
  React.__currentDispatcher = prevDispatcher;
}

可以看到，Hooks 的原理与 setState 基本一致，但需要注意 react 与 react-dom 之间传递了 dispatch，虽然你看不到。但这个 dispatch 必须对应到唯一的 React 实例，这就是为什么 Hooks 不允许同时加载多个 React 实例的原因。

和 updater 一样，dispatch 也可以被各平台实现重写，比如 react-debug-hooks 就重写了 dispatcher。

由于需要同时实现 readContext, useCallback, useContext, useEffect, useImperativeMethods, useLayoutEffect, useMemo, useReducer, useRef, useState，工程量比较浩大，建议了解基本架构就足够了，除非你要深入参与 React 生态建设。