本文翻译自：
How Does setState Know What to Do?

原作者：Dan Abramov

假如有任何版权题目，请联络shuirong1997@icloud.com

当你在组件中挪用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的东西，可不是React DOM的。别的，我们的基类React.Component是被定义在React内部。

所以题目来了：React.Component内部的setState怎样能去更新DOM呢？

事前声明：就像我的其他博客，你不须要熟练掌握React。这篇博客是为那些想要看看面纱以后是什么东西的人预备的。完整可选！

我们也许会以为React.Component类已包括了DOM更新逻辑。

但假如这是现实，那this.setState是怎样事情在其他环境中呢？比方：在React Native App中的组件也能继续React.Component，他们也能像上面一样挪用this.setState()，而且React Native事情在Android和iOS的原生视图而不是DOM中。

你能够也对React Test Renderer 或 Shallow Renderer比较熟习。这两个测试衬着器让你能够衬着平常的组件而且也能在他们中挪用this.setState，但他们可都不运用DOM。

假如你之前运用过一些衬着器比方说React ART，你能够晓得在页面中运用凌驾一个衬着器是没什么题目的。（比方：ART组件事情在React DOM 树的内部。）这会发生一个不可保持的全局标志或变量。

所以React.Component以某种体式格局将state的更新托付为详细的平台（译者注：比方Android, iOS），在我们明白这是怎样发作之前，让我们对包是怎样被星散和其缘由挖得更深一点吧！

这有一个罕见的毛病明白：React “引擎”在react包的内部。这不是现实。

现实上，从 React 0.14最先对包举行支解时，React包就故意地仅导出关于怎样定义组件的API了。React的大部分完成实在在“衬着器”中。

衬着器的个中一些例子包括：react-dom,react-dom/server,react-native,react-test-renderer,react-art（别的，你也能够构建本身的）。

这就是为何react包协助很大而不论作用在什么平台上。一切它导出的模块，比方React.Component，React.createElement，React.Children和[Hooks](https://reactjs.org/docs/hooks-intro.html)，都是平台无关的。不管你的代码运行在React DOM、React DOM Server、照样React Native，你的组件都能够以一种雷同的体式格局导入而且运用它们。

与之相对的是，衬着器会暴露出平台相干的接口，比方ReactDOM.render()，它会让你能够把React挂载在DOM节点中。每一个衬着器都供应像如许的接口，但抱负状况是：大多数组件都不须要从衬着器中导入任何东西。这能使它们更精简。

大多数人都以为React“引擎”是位于每一个自力的衬着器中的。许多衬着器都包括一份雷同的代码—我们叫它“调节器”，为了表现的更好，遵照这个步骤 能够让调节器的代码和衬着器的代码在打包时归到一处。（拷贝代码一般不是优化“打包后文件”（bundle）体积的好办法，但大多数React的运用者一次只须要一个衬着器，比方：react-dom（译者注：因而能够疏忽调节器的存在））

The takeaway here 是react包仅仅让你晓得怎样运用React的特征而无需相识他们是怎样被完成的。衬着器（react-dom,react-native等等）会供应React特征的完成和平台相干的逻辑；一些关于调节器的代码被分享出来了，但那只是零丁衬着器的完成细节罢了。

现在我们晓得了为何react和react-dom包须要为新特定更新代码了。比方：当React16.3新增了Context接口时，React.createContext()要领会在React包中被暴露出来。

然则React.createContext()现实上不会完成详细的逻辑（译者注：只定义接口，由其他衬着器来完成逻辑）。而且，在React DOM和React DOM Server上完成的逻辑也会有区分。所以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会用A要领追踪context值，但React DOM Server也许会用另一个差别的要领完成。

所以假如你将react晋级到16.3+，但没有晋级react-dom，你将运用一个还不晓得Provider和Consumer范例的衬着器，这也就旧版的react-dom能够会报错：fail saying these types are invalid的缘由。

一样的正告也会出现在React Native中，然则差别于React DOM，一个新的React版本不会马上发生一个对应的React Native版本。他们（React Native）有本身的宣布时候表。也许几周后，衬着器代码才会零丁更新到React Native库中。这就是为何新特征在React Native见效的时候会和React DOM差别。

Okay，那末现在我们晓得了react包不包括任何好玩的东西，而且详细的完成都在像react-dom，react-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;

从 setState的完成就能够看出，它做的一切的事情就是把使命托付给在这个组件实例中建立的衬着器：

// 简朴例子
setState(partialState, callback) {
  // 运用`updater`去和衬着器通讯
  this.updater.enqueueSetState(this, partialState, callback);
}

React DOM Server 能够想疏忽状况更新而且正告你，但是React DOM和React Native将会让调节器的拷贝部分去 处置惩罚它。

这就是只管this.setState()被定义在React包中也能够更新DOM的缘由。它挪用被React DOM增加的this.updater而且让React DOM来处置惩罚更新。

现在我们都比较相识“类”了，但“钩子”（Hooks）呢？

当人们第一次看到 钩子接口的提案时，他们常追念：useState是怎样晓得该做什么呢？这一假定几乎比对this.setState()的疑问还要诱人。

但就像我们现在看到的那样，setState()的完成一直以来都是模糊不清的。它除了通报挪用给当前的衬着器外什么都不做。所以，useState钩子做的事也是云云。

此次不是updater，钩子（Hooks）运用一个叫做“分配器”（dispatcher）的对象，当你挪用React.useState()、React.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);
  },
  // ...
};

零丁的衬着器会在衬着你的组件之前设置分配器（dispatcher）。

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

React DOM Server的完成在这里。由React DOM和React Native同享的调节器完成在这里。

这就是为何像react-dom如许的衬着器须要接见和你挪用的钩子所运用的react一样的包。不然你的组件将找不到分配器！假如你有多个React的拷贝在雷同的组件树中，代码能够不会一般事情。但是，这老是形成庞杂的Bug，因而钩子会在它耗光你的精神前强迫你去处理包的副本题目。

假如你不以为这有什么，你能够在东西运用它们前精致地覆蓋掉本来的分配器（__currentDispatcher的名字实在我本身编的但你能够在React堆栈中找到它真正的名字）。比方：React DevTools会运用一个特别的内建分配器来经由过程捕捉JavaScript挪用栈来反应（introspect）钩子。不要在家里反复这个（Don’t repeat this at home.）（译者注：多是“不要在家里模拟某项试验”的衍生体。多是个笑话，但我get到）

这也意味着钩子不是React固有的东西。假如在将来有许多类库想要重用雷同的基本钩子，理论上来讲分配器能够会被移到星散的包中而且被塑形成优异的接口—会有更少让人望而却步的称号—暴露出来。在现实中，我们更倾向去防止过于急急地将某物笼统，直到我们确实须要这么做。

updater和__currentDispatcher都是泛型程序设计（依靠注入/dependency injection）的绝佳实例。衬着器“注入”特征的完成。就像setState能够让你的组件看起来简朴明了。

当你运用React时，你不须要斟酌它是怎样事情的。我们希冀React用户去消费更多的时候去斟酌它们的运用代码而不是一些笼统的观点比方：依靠注入。但假如你曾猎奇this.setState()或useState()是怎样晓得它们该做什么的，那我愿望这篇文章将协助到你。