Overreacted

setState如何知道该做什么?

2018 M12 9 • ☕️ 6 min read

Translated by readers into: EspañolFrançais日本語简体中文

Read the originalImprove this translationView all translated posts

当你在组件中调用setState的时候,你认为发生了些什么?

import React from 'react';
import ReactDOM from 'react-dom';

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({ clicked: true });  }
  render() {
    if (this.state.clicked) {
      return <h1>Thanks</h1>;
    }
    return (
      <button onClick={this.handleClick}>
        Click me!
      </button>
    );
  }
}

ReactDOM.render(<Button />, document.getElementById('container'));

当然是:React根据下一个状态{clicked:true}重新渲染组件,同时更新DOM以匹配返回的<h1>Thanks</ h1>元素啊。

看起来很直白。但是等等,是 React做了这些吗?还是React DOM

更新DOM听起来像是React DOM的职责所在。但是我们调用的是this.setState(),而没有调用任何来自React DOM的东西。 而且我们组件的父类React.Component也是在React本身定义的。

所以存在于React.Component内部的setState()是如何更新DOM的呢?

免责声明: 就像本博客里绝大多数 其他的 帖子一样, 其实你不需要知道其中的任何知识,就可以有效地使用React。本文面向的是那些想要了解React背后原理的人。而这完全是可选的!


我们或许会认为:React.Component类包含了DOM更新的逻辑。

但是如果是这样的话,this.setState()又如何能在其他环境下使用呢?举个例子,React Native app中的组件也是继承自React.Component。他们依然可以像我们在上面做的那样调用this.setState(),而且React Native渲染的是安卓和iOS原生的界面而不是DOM。

你或许对React Test Renderer 或是 Shallow Renderer很熟悉。这些测试策略能让你正常渲染组件,也可以在组件内部调用this.setState()。但是这两个渲染器并不与DOM相关。

如果你曾使用过一些渲染器像React ART,你也许也知道在一个页面中我们是可以使用多个渲染器的。(举个例子,ART 组件在React DOM树的内部起作用。)这使得全局标志或变量无法维持。

因此,React.Component以某种未知的方式将处理状态(state)更新的任务委托给了特定平台的代码。在我们理解这些是如何发生的之前,让我们深挖一下包(packages)是如何分离的以及为什么这样分离。


有一个很常见的误解就是React“引擎”是存在于react包里面的。 然而事实并非如此。

实际上从React 0.14我们将代码拆分成多个包以来,react包故意只暴露一些定义组件的API。绝大多数React的实现都存在于“渲染器(renderers)”中。

react-domreact-dom/serverreact-nativereact-test-rendererreact-art都是常见的渲染器(当然你也可以创建属于你的渲染器)。

这就是为什么不管你的目标平台是什么,react包都是可用的。从react包中导出的一切,比如React.ComponentReact.createElementReact.Children 和(最终的)Hooks,都是独立于目标平台的。无论你是运行React DOM,还是 React DOM Server,或是 React Native,你的组件都可以使用同样的方式导入和使用。

相比之下,渲染器包暴露的都是特定平台的API,比如说:ReactDOM.render(),可以让你将React层次结构(hierarchy)挂载进一个DOM节点。每一种渲染器都提供了类似的API。理想状况下,绝大多数组件都不应该从渲染器中导入任何东西。只有这样,组件才会更加灵活。

和大多数人现在想的一样,React “引擎”就是存在于各个渲染器的内部。很多渲染器包含一份同样代码的复制 —— 我们称为“协调器”(“reconciler”)构建步骤(build step)将协调器代码和渲染器代码平滑地整合成一个高度优化的捆绑包(bundle)以获得更高的性能。(代码复制通常来说不利于控制捆绑包的大小,但是绝大多数React用户同一时间只会选用一个渲染器,比如说react-dom。)

这里要注意的是: react包仅仅是让你使用 React 的特性,但是它完全不知道这些特性是如何实现的。而渲染器包(react-domreact-native等)提供了React特性的实现以及平台特定的逻辑。这其中的有些代码是共享的(“协调器”),但是这就涉及到各个渲染器的实现细节了。


现在我们知道为什么当我们想使用新特性时,reactreact-dom需要被更新。举个例子,当React 16.3添加了Context API,React.createContext()API会被React包暴露出来。

但是React.createContext() 其实并没有实现 context。因为在React DOM 和 React DOM Server 中同样一个 API 应当有不同的实现。所以createContext()只返回了一些普通对象:

// 简化版代码
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;
}

当你在代码中使用 <MyContext.Provider><MyContext.Consumer>的时候, 是渲染器决定如何处理这些接口。React DOM也许用某种方式追踪context的值,但是React DOM Server用的可能是另一种不同的方式。

所以,如果你将react升级到了16.3+,但是不更新react-dom,那么你就使用了一个尚不知道ProviderConsumer类型的渲染器。这就是为什么一个老版本的react-dom报错说这些类型是无效的

同样的警告也会出现在React Native中。然而不同于React DOM的是, 一个React新版本的发布并不立即“强制”发布新的 React Native 版本。他们具有独立的发布日程。 每隔几周,更新后的渲染器代码就会单独同步到React Native仓库。这就是相比 React DOM,React Native 特性可用时间不同的原因。


好吧,所以现在我们知道了react包并不包含任何有趣的东西,除此之外,具体的实现也是存在于react-domreact-native之类的渲染器中。但是这并没有回答我们的问题。React.Component中的setState()如何与正确的渲染器“对话”?

答案是:每个渲染器都在已创建的类上设置了一个特殊的字段。这个字段叫做updater。这并不是要设置的的东西——而是,React DOM、React DOM Server 或 React Native在创建完你的类的实例之后会立即设置的东西:

// React DOM 内部
const inst = new YourComponent();
inst.props = props;
inst.updater = ReactDOMUpdater;
// React DOM Server 内部
const inst = new YourComponent();
inst.props = props;
inst.updater = ReactDOMServerUpdater;
// React Native 内部
const inst = new YourComponent();
inst.props = props;
inst.updater = ReactNativeUpdater;

查看 React.ComponentsetState的实现setState所做的一切就是委托渲染器创建这个组件的实例:

// 适当简化的代码
setState(partialState, callback) {
  // 使用`updater`字段回应渲染器!
  this.updater.enqueueSetState(this, partialState, callback);
}

React DOM Server 也许想 忽略一个状态更新并且警告你,而React DOM 与 React Native却想要让他们协调器(reconciler)的副本处理它

这就是this.setState()尽管定义在React包中,却能够更新DOM的原因。它读取由React DOM设置的this.updater`,让React DOM安排并处理更新。


现在关于类的部分我们已经知道了,那关于Hooks的呢?

当人们第一次看见Hooks proposal API,他们可能经常会想: useState是怎么 “知道要做什么”的?然后假设它比那些包含this.setState()React.Component类更“神奇”。

但是正如我们今天所看到的,基类中setState()的执行一直以来都是一种错觉。它除了将调用转发给当前的渲染器外,什么也没做。useState Hook也是做了同样的事情

Hooks使用了一个“dispatcher”对象,代替了updater字段。当你调用React.useState()、React.useEffect()、 或者其他内置的Hook时,这些调用被转发给了当前的dispatcher。

// React内部(适当简化)
const React = {
  // 真实属性隐藏的比较深,看你能不能找到它!
  __currentDispatcher: null,

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

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

各个渲染器会在渲染你的组件之前设置dispatcher:

// React DOM 内部
const prevDispatcher = React.__currentDispatcher;
React.__currentDispatcher = ReactDOMDispatcher;let result;
try {
  result = YourComponent(props);
} finally {
  // 恢复原状  React.__currentDispatcher = prevDispatcher;}

举个例子, React DOM Server的实现是在这里,还有就是React DOM 和 React Native共享的协调器的实现在这里

这就是为什么像react-dom这样的渲染器需要访问那个你调用Hooks的react包。否则你的组件将不会“看见”dispatcher!如果在一个组件树中存在React的多个副本,也许并不会这样。但是,这总是导致了一些模糊的错误,因此Hooks会强迫你在出现问题之前解决包的重复问题。

在高级工具用例中,你可以在技术上覆盖dispatcher,尽管我们不鼓励这种操作。(对于__currentDispatcher这个名字我撒谎了,但是你可以在React仓库中找到真实的名字。)比如说, React DevTools将会使用一个专门定制的dispatcher通过捕获JavaScript堆栈跟踪来观察Hooks树。请勿模仿。

这也意味着Hooks本质上并没有与React绑定在一起。如果未来有更多的库想要重用同样的原生的Hooks, 理论上来说dispatcher可以移动到一个分离的包中,然后暴露成一个一等(first-class)的API,然后给它起一个不那么“吓人”的名字。但是在实践中,我们会尽量避免过早抽象,直到需要它为止。

updater字段和__currentDispatcher对象都是称为依赖注入的通用编程原则的形式。在这两种情况下,渲染器将诸如setState之类的功能的实现“注入”到通用的React包中,以使组件更具声明性。

使用React时,你无需考虑这其中的原理。我们希望React用户花更多时间考虑他们的应用程序代码,而不是像依赖注入这样的抽象概念。但是如果你想知道this.setState()useState()是如何知道该做什么的,我希望这篇文章会有所帮助。