React PureComponent 源碼解析

ZHAO_ 發(fā)布于2019-08-20 10:33 / 574人閱讀

摘要：自身的源碼也很簡單，節(jié)選如下上面的就是暴露給外部使用的。關(guān)于的源碼分析就到這里。這是內(nèi)部使用的一個工具集。不過也不是萬能的，特定情況下自己實(shí)現(xiàn)可能更高效。

TL;DR

React 15.3.0 新增了一個 PureComponent 類，以 ES2015 class 的方式方便地定義純組件 (pure component)。這篇文章分析了一下源碼實(shí)現(xiàn)，并衍生探討了下 shallowCompare 和 PureRenderMixin。相關(guān)的 GitHub PR 在這里。

PureComponent 源碼分析

這個類的用法很簡單，如果你有些組件是純組件，那么把繼承類從 Component 換成 PureComponent 即可。當(dāng)組件更新時，如果組件的 props 和 state 都沒發(fā)生改變，render 方法就不會觸發(fā)，省去 Virtual DOM 的生成和比對過程，達(dá)到提升性能的目的。

import React, { PureComponent } from "react"

class Example extends PureComponent {
  render() {
    // ...
  }
}

PureComponent 自身的源碼也很簡單，節(jié)選如下：

function ReactPureComponent(props, context, updater) {
  // Duplicated from ReactComponent.
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
}

function ComponentDummy() {}
ComponentDummy.prototype = ReactComponent.prototype;
ReactPureComponent.prototype = new ComponentDummy();
ReactPureComponent.prototype.constructor = ReactPureComponent;
// Avoid an extra prototype jump for these methods.
Object.assign(ReactPureComponent.prototype, ReactComponent.prototype);
ReactPureComponent.prototype.isPureReactComponent = true;

上面的 ReactPureComponent 就是暴露給外部使用的 PureComponent 。可以看到它只是繼承了 ReactComponent 再設(shè)定了一下 isPureReactComponent 屬性。ComponentDummy 是典型的 JavaScript 原型模擬繼承的做法，對此有疑惑的可以看我的另一篇文章。另外，為了避免原型鏈拉長導(dǎo)致方法查找的性能開銷，還用 Object.assign 把方法從 ReactComponent 拷貝過來了。

跟 PureRenderMixin 不一樣的是，這里完全沒有實(shí)現(xiàn) shouldComponentUpdate。那 PureComponent 的 props/state 比對是在哪里做的呢？答案是 ReactCompositeComponent。

ReactCompositeComponent 這個類的信息太少，我只能推測它是負(fù)責(zé)實(shí)際渲染并維護(hù)組件實(shí)例的對象。建議大家從高層次了解 React 對組件的更新機(jī)制即可。以下幾篇官方文檔看完就足夠了。

Advanced Performance

Reconciliation

React (Virtual) DOM Terminology

這個類的代碼改動很多，但關(guān)鍵就在這里。下面是我簡化后的代碼片段：

// 定義 CompositeTypes
var CompositeTypes = {
  ImpureClass: 0,         // 繼承自 Component 的組件
  PureClass: 1,           // 繼承自 PureComponent 的組件
  StatelessFunctional: 2, // 函數(shù)組件
};

// 省略一堆代碼，因?yàn)榧尤肓?CompositeTypes 造成的調(diào)整

// 這個變量用來控制組件是否需要更新
var shouldUpdate = true;

// inst 是組件實(shí)例
if (inst.shouldComponentUpdate) {
  shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext);
} else {
  if (this._compositeType === CompositeType.PureClass) {
    // 用 shallowEqual 對比 props 和 state 的改動
    // 如果都沒改變就不用更新
    shouldUpdate =
      !shallowEqual(prevProps, nextProps) ||
      !shallowEqual(inst.state, nextState);
  }
}

簡而言之，ReactCompositeComponent 會在 mount 的時候判斷各個組件的類型，設(shè)定 _compositeType ，然后根據(jù)這個類型來判斷是非需要更新組件。這個 PR 中大部分改動都是因?yàn)榧恿?CompositeTypes 而做的調(diào)整性工作，實(shí)際跟 PureComponent 有關(guān)的就是 shallowEqual 的那兩行。

關(guān)于 PureComponent 的源碼分析就到這里。其他的就都是細(xì)節(jié)和測試，有興趣的可以自己看看 PR 。

shallowEqual, shallowCompare, PureRenderMixin 的聯(lián)系

我們知道在 PureComponent 出現(xiàn)之前，shallowCompare 和 PureRenderMixin 都可以做一樣的事情。于是好奇看了一下后兩者的代碼。

shallowCompare 的源碼：

var shallowEqual = require("shallowEqual");

function shallowCompare(instance, nextProps, nextState) {
  return (
    !shallowEqual(instance.props, nextProps) ||
    !shallowEqual(instance.state, nextState)
  );
}

module.exports = shallowCompare;

PureRenderMixin 的源碼：

var shallowCompare = require("shallowCompare");

var ReactComponentWithPureRenderMixin = {
  shouldComponentUpdate: function(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  },
};

module.exports = ReactComponentWithPureRenderMixin;

可以看到，shallowCompare 依賴 shallowEqual ，做的是跟剛才在 ReactCompositeComponent 里一樣的事情 -- 對比 props 和 state 。這個工具函數(shù)一般配合組件的 shouldComponentUpdate 一起使用，而這就是 PureRenderMixin 做的事情。不過 PureRenderMixin 是配合 React.createClass 這種老的組件定義方式使用的，在 ES2015 class 里用起來不是很方便，這也是 PureComponent 誕生的原因之一。

最后 shallowEqual 這玩意定義在哪里呢？它其實(shí)不是 React 的一部分，而是 fbjs 的一部分。這是 Facebook 內(nèi)部使用的一個工具集。

小結(jié)

React 之前一直沒有針對 ES2015 class 的純組件寫法，雖然自己實(shí)現(xiàn)起來并不麻煩，但這也算給出了一個官方的解決方案，可以不再依賴 addon 了。不過 PureComponent 也不是萬能的，特定情況下自己實(shí)現(xiàn) shouldComponentUpdate 可能更高效。

參考資料

PureComponent PR
shallowEqual
Shallow Compare
PureRenderMixin