<blockquote>本文翻譯自：<a href="https://overreacted.io/how-does-setstate-know-what-to-do/" rel="nofollow noreferrer">How Does setState Know What to Do?</a><p>原做者：<a href="https://mobile.twitter.com/dan_abramov" rel="nofollow noreferrer">Dan Abramov</a></p> <p>若是有任何版權問題，請聯繫<a href="mailto:shuirong1997@icloud.com">shuirong1997@icloud.com</a></p> </blockquote> <p>當你在組件中調用<code>setState</code>時，你以爲會發生什麼？</p> <pre><code class="react">import React from 'react'; import ReactDOM from 'react-dom';html
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> ); } }react
ReactDOM.render(<Button />, document.getElementById('container'));git
<p>固然，React會用<code>{ clicked: true}</code> 這條狀態從新渲染組件而且更新匹配到的DOM，而後返回<code><h1>Thanks</h1></code>元素。</p>
<p>聽起來彷佛簡潔明瞭。但別急，React（或者說React DOM）是怎麼作的？</p>
<p>更新DOM聽起來像是React DOM的事兒，但別忘了咱們調用的但是<code>this.setState()</code>，它是React的東西，可不是React DOM的。另外，咱們的基類<code>React.Component</code>是被定義在React內部。</p>
<p>因此問題來了：<code>React.Component</code>內部的<code>setState</code>怎麼能去更新DOM呢？</p>
<p><strong>事先聲明：就像個人<a href="https://overreacted.io/how-does-react-tell-a-class-from-a-function/" rel="nofollow noreferrer">其餘博客</a>，你不須要熟練掌握React。這篇博客是爲那些想要看看面紗以後是什麼東西的人準備的。徹底可選！</strong></p>
<hr>
<p>咱們或許會認爲<code>React.Component</code>類已經包含了DOM更新邏輯。</p>
<p>但若是這是事實，那<code>this.setState</code>是如何工做在其餘環境中呢？好比：在React Native App中的組件也能繼承<code>React.Component</code>，他們也能像上面同樣調用<code>this.setState()</code>，而且React Native工做在Android和iOS的原生視圖而不是DOM中。</p>
<p>你可能也對React Test Renderer 或 Shallow Renderer比較熟悉。這兩個測試渲染器讓你能夠渲染通常的組件而且也能在他們中調用<code>this.setState</code>，但他們可都不使用DOM。</p>
<p>若是你以前使用過一些渲染器好比說<a href="https://github.com/facebook/react/tree/master/packages/react-art" rel="nofollow noreferrer">React ART</a>，你可能知道在頁面中使用超過一個渲染器是沒什麼問題的。（好比：ART組件工做在React DOM 樹的內部。）這會產生一個不可維持的全局標誌或變量。</p>
<p><strong>因此<code>React.Component</code>以某種方式將state的更新委託爲具體的平臺（譯者注：好比Android, iOS）</strong>，在咱們理解這是如何發生以前，讓咱們對包是如何被分離和其緣由挖得更深一點吧！</p>
<hr>
<p>這有一個常見的錯誤理解：React "引擎"在<code>react</code>包的內部。這不是事實。</p>
<p>事實上，從 <a href="https://reactjs.org/blog/2015/07/03/react-v0.14-beta-1.html" rel="nofollow noreferrer">React 0.14</a>開始對包進行分割時，<code>React</code>包就有意地僅導出關於如何定義組件的API了。React的大部分實現其實在「渲染器」中。</p>
<p>渲染器的其中一些例子包括：<code>react-dom</code>,<code>react-dom/server</code>,<code>react-native</code>,<code>react-test-renderer</code>,<code>react-art</code>（另外，你也能夠<a href="https://github.com/facebook/react/blob/master/packages/react-reconciler/README.md" rel="nofollow noreferrer">構建本身的</a>）。</p>
<p>這就是爲何<code>react</code>包幫助很大而無論做用在什麼平臺上。全部它導出的模塊，好比<code>React.Component</code>，<code>React.createElement</code>，<code>React.Children</code>和<code>[Hooks](https://reactjs.org/docs/hooks-intro.html)</code>，都是平臺無關的。不管你的代碼運行在React DOM、React DOM Server、仍是React Native，你的組件均可以以一種相同的方式導入而且使用它們。</p>
<p>與之相對的是，渲染器會暴露出平臺相關的接口，好比<code>ReactDOM.render()</code>，它會讓你能夠把React掛載在DOM節點中。每一個渲染器都提供像這樣的接口，但理想狀況是：大多數組件都不須要從渲染器中導入任何東西。這能使它們更精簡。</p>
<p><strong>大多數人都認爲React「引擎」是位於每一個獨立的渲染器中的</strong>。許多渲染器都包含一份相同的代碼—咱們叫它<a href="https://github.com/facebook/react/tree/master/packages/react-reconciler" rel="nofollow noreferrer">「調節器」</a>，爲了表現的更好，遵循<a href="https://reactjs.org/blog/2017/12/15/improving-the-repository-infrastructure.html" rel="nofollow noreferrer">這個步驟</a> 可讓調節器的代碼和渲染器的代碼在打包時歸到一處。（拷貝代碼一般不是優化「打包後文件」（bundle）體積的好辦法，但大多數React的使用者一次只須要一個渲染器，好比：<code>react-dom</code>（譯者注：所以能夠忽略調節器的存在））</p>
<p>The takeaway here 是<code>react</code>包僅僅讓你知道如何使用React的特性而無需瞭解他們是如何被實現的。渲染器（<code>react-dom,react-native</code>等等）會提供React特性的實現和平臺相關的邏輯；一些關於調節器的代碼被分享出來了，但那只是單獨渲染器的實現細節而已。</p>
<hr>
<p>如今咱們知道了爲何<code>react</code>和<code>react-dom</code>包須要爲新特定更新代碼了。好比：當React16.3新增了Context接口時，<code>React.createContext()</code>方法會在React包中被暴露出來。</p>
<p>可是<code>React.createContext()</code>實際上不會實現具體的邏輯（譯者注：只定義接口，由其餘渲染器來實現邏輯）。而且，在React DOM和React DOM Server上實現的邏輯也會有區別。因此<code>createContext()</code>會返回一些純粹的對象（定義如何實現）：</p>
<pre><code class="react">// 一個簡單例子
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;
}
<p>你會在某處代碼中使用<code><MyContext.Provider></code>或<code><MyContext.Consumer</code>>，那裏就是決定着如何處理他們的渲染器。React DOM會用A方法追蹤context值，但React DOM Server或許會用另外一個不一樣的方法實現。</p> <p><strong>因此若是你將<code>react</code>升級到16.3+，但沒有升級react-dom，你將使用一個還不知道<code>Provider</code>和<code>Consumer</code>類型的渲染器</strong>，這也就舊版的<code>react-dom</code>可能會<a href="https://stackoverflow.com/a/49677020/458193" rel="nofollow noreferrer">報錯：fail saying these types are invalid</a>的緣由。</p> <p>一樣的警告也會出如今React Native中，可是不一樣於React DOM，一個新的React版本不會當即產生一個對應的React Native版本。他們（React Native）有本身的發佈時間表。大概幾周後，渲染器代碼纔會<a href="https://github.com/facebook/react-native/commits/master/Libraries/Renderer/oss" rel="nofollow noreferrer">單獨更新</a>到React Native庫中。這就是爲何新特性在React Native生效的時間會和React DOM不一樣。</p> <hr> <p>Okay，那麼如今咱們知道了<code>react</code>包不包含任何好玩的東西，而且具體的實現都在像<code>react-dom</code>，<code>react-native</code>這樣的渲染器中。但這並不能回答咱們開頭提出的問題。<code>React.Component</code>裏的<code>setState()</code>是如何和對應的渲染器通訊的呢？</p> <p><strong>答案是每一個渲染器都會在建立的類中添加一個特殊的東西</strong>，這個東西叫<code>updater</code>。它不是你添加的東西—偏偏相反，它是React DOM，React DOM Server 或者React Native在建立了一個類的實例後添加的：</p> <pre><code class="react">// 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; ```github
<p>從 <a href="https://github.com/facebook/react/blob/ce43a8cd07c355647922480977b46713bd51883e/packages/react/src/ReactBaseClasses.js" rel="nofollow noreferrer"><code>setState</code>的實現</a>就能夠看出，它作的全部的工做就是把任務委託給在這個組件實例中建立的渲染器：</p> <pre><code class="react">// 簡單例子 setState(partialState, callback) { // 使用`updater`去和渲染器通訊 this.updater.enqueueSetState(this, partialState, callback); } ```segmentfault
<p>React DOM Server <a href="https://github.com/facebook/react/blob/ce43a8cd07c355647922480977b46713bd51883e/packages/react-dom/src/server/ReactPartialRenderer.js" rel="nofollow noreferrer">可能想</a>忽略狀態更新而且警告你，然而React DOM和React Native將會讓調節器的拷貝部分去 <a href="https://github.com/facebook/react/blob/ce43a8cd07c355647922480977b46713bd51883e/packages/react-reconciler/src/ReactFiberClassComponent.js" rel="nofollow noreferrer">處理它</a>。</p> <p>這就是儘管<code>this.setState()</code>被定義在React包中也能夠更新DOM的緣由。它調用被React DOM添加的<code>this.updater</code>而且讓React DOM來處理更新。</p> <hr> <p>如今咱們都比較瞭解「類」了，但「鉤子」（Hooks）呢？</p> <p>當人們第一次看到 <a href="https://reactjs.org/docs/hooks-intro.html" rel="nofollow noreferrer">鉤子接口的提案</a>時，他們常回想：<code>useState</code>是怎麼知道該作什麼呢？這一假設簡直比對<code>this.setState()</code>的疑問還要迷人。</p> <p>但就像咱們現在看到的那樣，<code>setState()</code>的實現一直以來都是模糊不清的。它除了傳遞調用給當前的渲染器外什麼都不作。因此，<code>useState</code>鉤子作的事也是如此。</p> <p>此次不是<code>updater</code>，鉤子（Hooks）使用一個叫作「分配器」（dispatcher）的對象，當你調用<code>React.useState()</code>、<code>React.useEffect()</code>或者其餘自帶的鉤子時，這些調用會被推送給當前的分配器。</p> <pre><code class="react">// In React (simplified a bit) const React = { // Real property is hidden a bit deeper, see if you can find it! __currentDispatcher: null,react-native
useState(initialState) { return React.__currentDispatcher.useState(initialState); },數組
useEffect(initialState) { return React.__currentDispatcher.useEffect(initialState); }, // ... };dom
<p>單獨的渲染器會在渲染你的組件以前設置分配器（dispatcher）。</p>
<pre><code class="react">// In React DOM
const prevDispatcher = React.__currentDispatcher;
React.__currentDispatcher = ReactDOMDispatcher;let result;
try {
result = YourComponent(props);
} finally {
// Restore it back React.__currentDispatcher = prevDispatcher;}
<p>React DOM Server的實如今<a href="https://github.com/facebook/react/blob/ce43a8cd07c355647922480977b46713bd51883e/packages/react-dom/src/server/ReactPartialRendererHooks.js" rel="nofollow noreferrer">這裏</a>。由React DOM和React Native共享的調節器實如今<a href="https://github.com/facebook/react/blob/ce43a8cd07c355647922480977b46713bd51883e/packages/react-reconciler/src/ReactFiberHooks.js" rel="nofollow noreferrer">這裏</a>。</p> <p>這就是爲何像<code>react-dom</code>這樣的渲染器須要訪問和你調用的鉤子所使用的<code>react</code>同樣的包。不然你的組件將找不到分配器！若是你有<a href="https://github.com/facebook/react/issues/13991" rel="nofollow noreferrer">多個React的拷貝在相同的組件樹中</a>，代碼可能不會正常工做。然而，這老是形成複雜的Bug，所以鉤子會在它耗光你的精力前強制你去解決包的副本問題。</p> <p>若是你不以爲這有什麼，你能夠在工具使用它們前精巧地覆蓋掉原先的分配器（<code>__currentDispatcher</code>的名字其實我本身編的但你能夠在React倉庫中找到它真正的名字）。好比：React DevTools會使用一個<a href="https://github.com/facebook/react/blob/ce43a8cd07c355647922480977b46713bd51883e/packages/react-debug-tools/src/ReactDebugHooks.js" rel="nofollow noreferrer">特殊的內建分配器</a>來經過捕獲JavaScript調用棧來反映（introspect）鉤子。不要在家裏重複這個（Don’t repeat this at home.）（譯者注：多是「不要在家裏模仿某項實驗」的衍生體。多是個笑話，但我get到）</p> <p>這也意味着鉤子不是React固有的東西。若是在未來有不少類庫想要重用相同的基礎鉤子，理論上來講分配器可能會被移到分離的包中而且被塑形成優秀的接口—會有更少讓人望而生畏的名稱—暴露出來。在實際中，咱們更偏向去避免過於倉促地將某物抽象，直到咱們的確須要這麼作。</p> <p><code>updater</code>和<code>__currentDispatcher</code>都是泛型程序設計（<em>依賴注入</em>/<em>dependency injection</em>）的絕佳實例。渲染器「注入」特性的實現。就像<code>setState</code>可讓你的組件看起來簡單明瞭。</p> <p>當你使用React時，你不須要考慮它是如何工做的。咱們指望React用戶去花費更多的時間去考慮它們的應用代碼而不是一些抽象的概念好比：依賴注入。但若是你曾好奇<code>this.setState()</code>或<code>useState()</code>是怎麼知道它們該作什麼的，那我但願這篇文章將幫助到你。</p>ide