React 避免不必要的更新(函數元件)

使用memo()對函數元件進行緩存，使其隻有在props變化時重新執行。

使用了memo()之後導緻元件不必要更新的唯一因素就隻有props的改變。對于引用類型的props改變是導緻元件不必要更新的罪魁禍首，因為那常常難以讓人察覺。

當元件執行時，會對元件中的所有變量重新初始化。如下代碼：

每次點選 increment 按鈕都會出發 mycomponent 元件的執行，進而導緻 data 的從新初始化。而 list 元件發現 datasource屬性的引用位址發生了變化就會導緻元件重新執行。

使用usememo緩存data引用的位址，有效的避免元件執行時不必要的更新引用的變量

至此我們發現了變量的初始化會導緻元件的重新渲染，那麼上面的代碼中視乎還存在一個問題    <button onclick={()=>setn(n+1)}>increment</button>，這裡将箭頭函數直接寫死在了元素上，那麼每次執行都會重新建立一個 “新的” 箭頭函數。如果目前的元件不是一個元素而是一個元件的話同樣會導緻元件的不必要執行。

使用usecallback緩存函數，隻有在n變化的時候對函數更新

可讀性上的問題可以通過将代碼從模闆中抽離解決。

總的來說一句話。在函數元件中等于号右邊的初始化操作都需要加上 use 字首（希望讀者能夠在工作中很好運用起來）。例如

需要格外注意的是：對應的依賴。在一般的情況下你發現應該更新的資料沒有更新，大機率是沒有将依賴添加到數組中。緻在外部資料變化之後沒有及時對緩存進行更新。進而拿到的是在狀态變化之前的值。