React, how to avoid re-render every time

避免每次 props/state 更新都 re-render

React.Component 裡， 如果 props/state 發生改變即會觸發重新渲染 (re-render) ， parent component 重新渲染時會觸發重新渲染 child components 。

可以透過 shouldComponentUpdate 這個 lifecycle 方法來選定只有特定的 props 有改變時才更新 component ， 或是改使用 React.PureComponent ， 這樣就能僅在任何 props/state 有改變時才觸發更新。

shouldComponentUpdate 比較 props/state 是否相等的基準是使用 shallowEqual ，特性是會以 object 的第一層 key 做 strict equal (===)，換言之即使是同樣的值，若 reference 的物件不同就會被視為是不同的物件。