摘要：在組件未定義的情況下，會(huì)判斷該組件是否是，如果是的話，會(huì)對(duì)新舊進(jìn)行比較，一旦新舊不一致，會(huì)觸發(fā)。而用于渲染復(fù)雜列表的數(shù)據(jù)其實(shí)并沒(méi)有變化，但由于重新觸發(fā)，列表還是會(huì)重新渲染。

在react開(kāi)發(fā)中，經(jīng)常會(huì)遇到組件重復(fù)渲染的問(wèn)題，父組件一個(gè)state的變化，就會(huì)導(dǎo)致以該組件的所有子組件都重寫(xiě)render，盡管絕大多數(shù)子組件的props沒(méi)有變化

首先，先上一張react生命周期圖：

這張圖將react的生命周期分為了三個(gè)階段：生成期、存在期、銷(xiāo)毀期，這樣在create、props、state、unMount狀態(tài)變化時(shí)我們可以清楚的看到reacte觸發(fā)了哪些生命周期鉤子以及什么時(shí)候會(huì)render。

如果我們需要更改root的一個(gè)state，使綠色組件視圖更改

如果你寫(xiě)過(guò)vue，你會(huì)發(fā)現(xiàn)組件更新是如上圖那樣的（視圖指令已編譯為修改視圖的函數(shù)存放在綁定的state里的屬性里，所以能夠做到靶向修改），而react會(huì)以組件為根，重新渲染整個(gè)組件子樹(shù)，如下圖（綠色是期望的render路徑，橙色是無(wú)用render）：

所以在react里，我們探討的render性能優(yōu)化是react調(diào)用render的路徑如下：

shouldComponentUpdate(nextProps, nextState)

使用shouldComponentUpdate()以讓React知道當(dāng)前狀態(tài)或?qū)傩缘母淖兪欠癫挥绊懡M件的輸出，默認(rèn)返回ture，返回false時(shí)不會(huì)重寫(xiě)render，而且該方法并不會(huì)在初始化渲染或當(dāng)使用forceUpdate()時(shí)被調(diào)用，我們要做的只是這樣：

shouldComponentUpdate(nextProps, nextState) {
  return nextState.someData !== this.state.someData
}

但是，state里的數(shù)據(jù)這么多，還有對(duì)象，還有復(fù)雜類(lèi)型數(shù)據(jù)，react的理念就是拆分拆分再拆分，這么多子組件，我要每個(gè)組件都去自己一個(gè)一個(gè)對(duì)比嗎？？不存在的，這么麻煩，要知道我們的終極目標(biāo)是不勞而獲-_-

React.PureComponent 與 React.Component 幾乎完全相同，但 React.PureComponent 通過(guò)props和state的淺對(duì)比來(lái)實(shí)現(xiàn) shouldComponentUpate()。如果對(duì)象包含復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，它可能會(huì)因深層的數(shù)據(jù)不一致而產(chǎn)生錯(cuò)誤的否定判斷(表現(xiàn)為對(duì)象深層的數(shù)據(jù)已改變視圖卻沒(méi)有更新）

關(guān)注點(diǎn)：

無(wú)論組件是否是 PureComponent，如果定義了 shouldComponentUpdate()，那么會(huì)調(diào)用它并以它的執(zhí)行結(jié)果來(lái)判斷是否 update。在組件未定義 shouldComponentUpdate() 的情況下，會(huì)判斷該組件是否是 PureComponent，如果是的話，會(huì)對(duì)新舊 props、state 進(jìn)行 shallowEqual 比較，一旦新舊不一致，會(huì)觸發(fā) update。

淺判等 只會(huì)比較到兩個(gè)對(duì)象的 ownProperty 是否符合 Object.js() 判等，不會(huì)遞歸地去深層比較---源碼

const hasOwnProperty = Object.prototype.hasOwnProperty;

/**
 * inlined Object.is polyfill to avoid requiring consumers ship their own
 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
 */
function is(x: mixed, y: mixed): boolean {
  // SameValue algorithm
  if (x === y) { // Steps 1-5, 7-10
    // Steps 6.b-6.e: +0 != -0
    // Added the nonzero y check to make Flow happy, but it is redundant
    return x !== 0 || y !== 0 || 1 / x === 1 / y;
  } else {
    // Step 6.a: NaN == NaN
    return x !== x && y !== y;
  }
}

/**
 * Performs equality by iterating through keys on an object and returning false
 * when any key has values which are not strictly equal between the arguments.
 * Returns true when the values of all keys are strictly equal.
 */
function shallowEqual(objA: mixed, objB: mixed): boolean {
  if (is(objA, objB)) {
    return true;
  }

  if (typeof objA !== "object" || objA === null ||
      typeof objB !== "object" || objB === null) {
    return false;
  }

  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  // Test for A"s keys different from B.
  for (let i = 0; i < keysA.length; i++) {
    if (
      !hasOwnProperty.call(objB, keysA[i]) ||
      !is(objA[keysA[i]], objB[keysA[i]])
    ) {
      return false;
    }
  }

  return true;
}

至于復(fù)雜數(shù)據(jù)結(jié)構(gòu)，用Object.key()獲取下key，然后key和對(duì)應(yīng)的value都是基礎(chǔ)類(lèi)型數(shù)據(jù)，就是算是簡(jiǎn)單數(shù)據(jù)結(jié)構(gòu)，不然就是復(fù)雜

針對(duì)以上規(guī)則我們?cè)陧?xiàng)目開(kāi)發(fā)種可以做出如下優(yōu)化：

盡量將復(fù)雜類(lèi)型數(shù)據(jù)（ArrayList）所關(guān)聯(lián)的視圖多帶帶拆成PureComonent有助于提高渲染性能，比如表單、文本域和復(fù)雜列表在同一個(gè) render() 中，表單域的輸入字段改變會(huì)頻繁地觸發(fā) setState() 從而導(dǎo)致 組件 重新 render()。而用于渲染復(fù)雜列表的數(shù)據(jù)其實(shí)并沒(méi)有變化，但由于重新觸發(fā) render()，列表還是會(huì)重新渲染。

我想復(fù)雜數(shù)組沒(méi)變化時(shí)也不要render(), 那你用react-immutable-render-mixin，來(lái)，我們看看插件的介紹：

Users are urged to use PureRenderMixin with facebook/immutable-js. If performance is still an issue an examination of your usage of Immutable.js should be your first path towards a solution. This library was created from experimentations with Immutable that were ultimately erroneous; improper usage of Immutable.js