精讀《setState 作了什麼》

時間 2019-11-07

標籤精讀 setState 作了什麼简体版

原文原文鏈接

1 引言

setState 是 React 框架最經常使用的命令，它是用來更新狀態的，這也是 React 框架劃時代的功能。前端

可是 setState 函數是 react 包導出的，他們又是如何與 react-dom react-native react-art 這些包結合的呢？react

經過 how-does-setstate-know-what-to-do 這篇文章，能夠解開這個祕密。git

2 概述

setState 函數是在 React.Component 組件中調用的，因此最天然的聯想是，更新 DOM 的邏輯在 react 包中實現。github

可是 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 這些包是在各自平臺的具體實現。react-native

各平臺具體的渲染引擎實現被稱爲 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 生態建設。