解決React重複渲染效能問題

使用 PureComponent 減少重複渲染

“An architect working on a draft with a pencil and ruler” by Daniel McCullough on Unsplash

我們在寫 React 的時候常常會用 map 來渲染列表，當列表的東西很多的時候，就會產生效能的問題。下面這個範例的程式碼就會有效能上的問題，而我們也常常使用下面這種方式來渲染元件。我先解釋一下下面的元件在做什麼，我們做了一個按鈕，點選以後會在陣列裡面增加一筆新的資料。

怎樣發現效能的問題？

這邊有兩種方法，第一種是使用 React Developer Tools插件，第二種是使用 why-did-you-update 來偵測，兩種都可以偵測效能的問題，但是個人偏好使用第二種方法。

React Developer Tools 檢查效能問題

安裝完以後就可以到介面上勾選 highlight updates 選項，這時候有重新渲染的元件就會被框起來。

我們可以看到點選按鈕增加的時候，每個子元件都重新渲染，所以點得越快顏色就越深，這樣在巨大陣列渲染的時候就會容易有效能上的問題。

why-did-you-update 檢查效能問題

使用 npm 指令安裝完以後，我們在程式裡面呼叫並且使用它來監控 React 渲染，如以下程式。

if (process.env.NODE_ENV !== 'production') {
  const { whyDidYouUpdate } = require('why-did-you-update');
  whyDidYouUpdate(React);
}

當有不必要的渲染發生的時候，套件就會用 console 提醒你這個問題

PureComponent 解決列表渲染的效能問題

我們可以把 MsgItem 改為使用 PureComponent 來解決重複渲染的問題，PureComponent 會對元件的 prop & state 做淺檢查，如果數值是一樣的話，就不會重新渲染。

修改完之後重新使用 developer tool 觀察元件更新的狀況，我們會發現不會再有重複渲染的效能問題了。

總結

所以我們在規劃元件的時候可以用 PureComponent 來減少效能的問題，如果有複雜的 props 傳入，而我們只要根據某個 props 更新，我們可以用 shouldComponentUpdate 來判斷是否需要更新，另外就是去學習元件怎麼去拆分，太複雜的 props 在傳入子元件之前要怎麼簡化再去導入也是我們要去學習的東西。

關於React 16.3 的 liftcycle 可以參考。

Understanding React — React 16.3 + Component life-cycle