react 簡單優化設計-純組件的優化

加入有如下代碼;

    setTimeout(()=>{
        <A data = {data}></A>
    },1000)

這裏每隔1 秒 就刷新一次，這個時候 A 組件會每次重複diff 算法，看是否該重新渲染，然後走render 方法

這樣效率太低，我們的設想就是，只要 data 數據不變，我們就不會渲染，這樣會節省很大的成本

所以這就有了純組件的概念：一種是class 的方式（通過繼承實現）

一種是 函數的方式，我們通過 函數包裝的方式實現

PureComponent
定製了shouldComponentUpdate後的Component

class Comp extends React.PureComponent 

React.memo
React 16.6.0 使用 React.memo 讓函數式的組件也有PureComponent的功能

const Joke = React.memo(() => (<div>{this.props.value || 'loading...' }</div>)

只要通過這個兩種方式包裝後就會實現 顯示組件的屬性值的淺比較，這個時候

我們需要注意點，注意點，注意點：：

就是給純組件傳遞值的時候，一定要是 值傳遞！

data= {
    a:100,
    b:88
}

// 這種方式不行，傳遞的是引用，指針，不是值傳遞
<A data= {data}></A>

應當如下方式傳遞：

<A {...data }></A>

這種方式相當於 

<A a=100 b=88></A>

這種寫法見到了就行了！