摘要：本文翻譯自原作者如果有任何版權(quán)問(wèn)題，請(qǐng)聯(lián)系當(dāng)你在組件中調(diào)用時(shí)，你覺得會(huì)發(fā)生什么當(dāng)然，會(huì)用這條狀態(tài)重新渲染組件并且更新匹配到的，然后返回元素。如果你之前使用過(guò)一些渲染器比如說(shuō)，你可能知道在頁(yè)面中使用超過(guò)一個(gè)渲染器是沒什么問(wèn)題的。

本文翻譯自：How Does setState Know What to Do?
原作者：Dan Abramov
如果有任何版權(quán)問(wèn)題，請(qǐng)聯(lián)系[email protected]

當(dāng)你在組件中調(diào)用setState時(shí)，你覺得會(huì)發(fā)生什么？

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 
Thanks
;
    }
    return (
      
        Click me!
      
    );
  }
}

ReactDOM.render(, document.getElementById("container"));

當(dāng)然，React會(huì)用{ clicked: true} 這條狀態(tài)重新渲染組件并且更新匹配到的DOM，然后返回

Thanks

聽起來(lái)似乎簡(jiǎn)潔明了。但別急，React（或者說(shuō)React DOM）是怎么做的？

更新DOM聽起來(lái)像是React DOM的事兒，但別忘了我們調(diào)用的可是this.setState()，它是React的東西，可不是React DOM的。另外，我們的基類React.Component是被定義在React內(nèi)部。

所以問(wèn)題來(lái)了：React.Component內(nèi)部的setState怎么能去更新DOM呢？

事先聲明：就像我的其他博客，你不需要熟練掌握React。這篇博客是為那些想要看看面紗之后是什么東西的人準(zhǔn)備的。完全可選！

我們或許會(huì)認(rèn)為React.Component類已經(jīng)包含了DOM更新邏輯。

但如果這是事實(shí)，那this.setState是如何工作在其他環(huán)境中呢？比如：在React Native App中的組件也能繼承React.Component，他們也能像上面一樣調(diào)用this.setState()，并且React Native工作在Android和iOS的原生視圖而不是DOM中。

你可能也對(duì)React Test Renderer 或 Shallow Renderer比較熟悉。這兩個(gè)測(cè)試渲染器讓你可以渲染一般的組件并且也能在他們中調(diào)用this.setState，但他們可都不使用DOM。

如果你之前使用過(guò)一些渲染器比如說(shuō)React ART，你可能知道在頁(yè)面中使用超過(guò)一個(gè)渲染器是沒什么問(wèn)題的。（比如：ART組件工作在React DOM 樹的內(nèi)部。）這會(huì)產(chǎn)生一個(gè)不可維持的全局標(biāo)志或變量。

所以React.Component以某種方式將state的更新委托為具體的平臺(tái)（譯者注：比如Android, iOS），在我們理解這是如何發(fā)生之前，讓我們對(duì)包是如何被分離和其原因挖得更深一點(diǎn)吧！

這有一個(gè)常見的錯(cuò)誤理解：React "引擎"在react包的內(nèi)部。這不是事實(shí)。

事實(shí)上，從 React 0.14開始對(duì)包進(jìn)行分割時(shí)，React包就有意地僅導(dǎo)出關(guān)于如何定義組件的API了。React的大部分實(shí)現(xiàn)其實(shí)在“渲染器”中。

渲染器的其中一些例子包括：react-dom,react-dom/server,react-native,react-test-renderer,react-art（另外，你也可以構(gòu)建自己的）。

這就是為什么react包幫助很大而不管作用在什么平臺(tái)上。所有它導(dǎo)出的模塊，比如React.Component，React.createElement，React.Children和[Hooks](https://reactjs.org/docs/hooks-intro.html)，都是平臺(tái)無(wú)關(guān)的。無(wú)論你的代碼運(yùn)行在React DOM、React DOM Server、還是React Native，你的組件都可以以一種相同的方式導(dǎo)入并且使用它們。

與之相對(duì)的是，渲染器會(huì)暴露出平臺(tái)相關(guān)的接口，比如ReactDOM.render()，它會(huì)讓你可以把React掛載在DOM節(jié)點(diǎn)中。每個(gè)渲染器都提供像這樣的接口，但理想情況是：大多數(shù)組件都不需要從渲染器中導(dǎo)入任何東西。這能使它們更精簡(jiǎn)。

大多數(shù)人都認(rèn)為React“引擎”是位于每個(gè)獨(dú)立的渲染器中的。許多渲染器都包含一份相同的代碼—我們叫它“調(diào)節(jié)器”，為了表現(xiàn)的更好，遵循這個(gè)步驟 可以讓調(diào)節(jié)器的代碼和渲染器的代碼在打包時(shí)歸到一處。（拷貝代碼通常不是優(yōu)化“打包后文件”（bundle）體積的好辦法，但大多數(shù)React的使用者一次只需要一個(gè)渲染器，比如：react-dom（譯者注：因此可以忽略調(diào)節(jié)器的存在））

The takeaway here 是react包僅僅讓你知道如何使用React的特性而無(wú)需了解他們是如何被實(shí)現(xiàn)的。渲染器（react-dom,react-native等等）會(huì)提供React特性的實(shí)現(xiàn)和平臺(tái)相關(guān)的邏輯；一些關(guān)于調(diào)節(jié)器的代碼被分享出來(lái)了，但那只是多帶帶渲染器的實(shí)現(xiàn)細(xì)節(jié)而已。

現(xiàn)在我們知道了為什么react和react-dom包需要為新特定更新代碼了。比如：當(dāng)React16.3新增了Context接口時(shí)，React.createContext()方法會(huì)在React包中被暴露出來(lái)。

但是React.createContext()實(shí)際上不會(huì)實(shí)現(xiàn)具體的邏輯（譯者注：只定義接口，由其他渲染器來(lái)實(shí)現(xiàn)邏輯）。并且，在React DOM和React DOM Server上實(shí)現(xiàn)的邏輯也會(huì)有區(qū)別。所以createContext()會(huì)返回一些純粹的對(duì)象（定義如何實(shí)現(xiàn)）：

// 一個(gè)簡(jiǎn)單例子
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;
}

你會(huì)在某處代碼中使用或>，那里就是決定著如何處理他們的渲染器。React DOM會(huì)用A方法追蹤context值，但React DOM Server或許會(huì)用另一個(gè)不同的方法實(shí)現(xiàn)。

// 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;

// 簡(jiǎn)單例子
setState(partialState, callback) {
  // 使用`updater`去和渲染器通信
  this.updater.enqueueSetState(this, partialState, callback);
}

但就像我們?nèi)缃窨吹降哪菢樱?b>setState()的實(shí)現(xiàn)一直以來(lái)都是模糊不清的。它除了傳遞調(diào)用給當(dāng)前的渲染器外什么都不做。所以，useState鉤子做的事也是如此。

這次不是updater，鉤子（Hooks）使用一個(gè)叫做“分配器”（dispatcher）的對(duì)象，當(dāng)你調(diào)用React.useState()、React.useEffect()或者其他自帶的鉤子時(shí)，這些調(diào)用會(huì)被推送給當(dāng)前的分配器。

// 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);
  },
  // ...
};

多帶帶的渲染器會(huì)在渲染你的組件之前設(shè)置分配器（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的實(shí)現(xiàn)在這里。由React DOM和React Native共享的調(diào)節(jié)器實(shí)現(xiàn)在這里。

這就是為什么像react-dom這樣的渲染器需要訪問(wèn)和你調(diào)用的鉤子所使用的react一樣的包。否則你的組件將找不到分配器！如果你有多個(gè)React的拷貝在相同的組件樹中，代碼可能不會(huì)正常工作。然而，這總是造成復(fù)雜的Bug，因此鉤子會(huì)在它耗光你的精力前強(qiáng)制你去解決包的副本問(wèn)題。

如果你不覺得這有什么，你可以在工具使用它們前精巧地覆蓋掉原先的分配器（__currentDispatcher的名字其實(shí)我自己編的但你可以在React倉(cāng)庫(kù)中找到它真正的名字）。比如：React DevTools會(huì)使用一個(gè)特殊的內(nèi)建分配器來(lái)通過(guò)捕獲JavaScript調(diào)用棧來(lái)反映（introspect）鉤子。不要在家里重復(fù)這個(gè)（Don’t repeat this at home.）（譯者注：可能是“不要在家里模仿某項(xiàng)實(shí)驗(yàn)”的衍生體?？赡苁莻€(gè)笑話，但我get到）

這也意味著鉤子不是React固有的東西。如果在將來(lái)有很多類庫(kù)想要重用相同的基礎(chǔ)鉤子，理論上來(lái)說(shuō)分配器可能會(huì)被移到分離的包中并且被塑造成優(yōu)秀的接口—會(huì)有更少讓人望而生畏的名稱—暴露出來(lái)。在實(shí)際中，我們更偏向去避免過(guò)于倉(cāng)促地將某物抽象，直到我們的確需要這么做。

updater和__currentDispatcher都是泛型程序設(shè)計(jì)（依賴注入/dependency injection）的絕佳實(shí)例。渲染器“注入”特性的實(shí)現(xiàn)。就像setState可以讓你的組件看起來(lái)簡(jiǎn)單明了。

當(dāng)你使用React時(shí)，你不需要考慮它是如何工作的。我們期望React用戶去花費(fèi)更多的時(shí)間去考慮它們的應(yīng)用代碼而不是一些抽象的概念比如：依賴注入。但如果你曾好奇this.setState()或useState()是怎么知道它們?cè)撟鍪裁吹模俏蚁Ｍ@篇文章將幫助到你。