大家好，我是奶綠茶
網頁最吃效能的動作是更新 DOM，React / Vue 提供了 Virtual DOM 的核心優化寫法，開發人員可以專注在開發上，提早下班
不過寫不好的話，效能還是會慢的。
今天來聊聊 React vs Vue render 優化篇
來人呀，先上 Code
當 Component 有執行 render 時，紅色數字就會加 1 ，用來方便我們檢視。
四個 Component 都會從 props 接收 count 值
所以按下 setCount button, 四個都會更新，這是正確的
右邊的 setAnotherCount 是我放的無意義 更新 state用
用意是要來觀查四個 Component 的 render 事件。
沒有用 PureComponent 或是 memo 的 Component ，不管 props 有沒有異動，都會發生 render 事件。
React.Component 優化法
可以自己在 shouldComponentUpdate(nextProps, nextState)
判斷要不要重新 render。
或是改用 React.PureComponent ，他會在 shouldComponentUpdate
幫你加上 Shallow Compare 自動比對 props 和 state 有沒有更新。
那你會想說，就全站都用 PureComponent 就好了呀 ?
沒運算一定比有運算來的快。
全站如果有一千個 PureComponent , 每次 state 更新，就要比對一千次。
Stateless Component 優化法
原本的 Stateless 寫法，不支援 shouldComponentUpdate
但 React 在其中一版更新時，加入了 React.memo
https://reactjs.org/docs/react-api.html#reactmemo
React.memo is the equivalent to the class version React.PureComponent
React.memo 等於 class Component 版的 PureComponent
可以在第二參數加入判斷要不要重新 render
更改一下你的程式碼，就可以讓效能提升，提早下班喔。
Vue render 篇
Vue 不需要，因為他都幫你做完了，結案。
(Vue 沒有 shouldComponentUpdate , 想擋都擋不住)
工商服務
想要全面了解 React 帶來的優點，
奶綠我有開設 React + Webpack 班，好的老師帶你飛上天。