PureComponent

PureComponent 和 Component 類似，差別在於 PureComponent 內部實作 shouldComponentUpdate()，而 Component 則需自定義。

PureComponent 可自動比對前後的 props 或 state ，如不同則觸發 render() ，如相同則跳過，藉此減少 render 次數來提升效能。

import React, { PureComponent } from "react";

class App extends PureComponent {
    render() {
        return (
            <div>App content...</div>
        )
    }
}

export default App;

React.memo()

React.memo() 功能與 PureComponent 類似，可在 functional component 內使用，當 props 或 state 沒有發生變動的時候，React 會跳過 render來提升效能。

const app = props => {
    return(
        <div>app content...</div>
    )
}

export default React.memo(app);

參考資料： React.memo PureComponent React 效能優化 — PureComponent

iamsiutw / daily_note

20190305 #18

日期: 2019/3/5 TUE

目標: 18/30

PureComponent

React.memo()