react暇談(2)——react組件更新的原理

時間 2019-11-08

標籤 react 組件更新原理欄目 React 简体版

原文原文鏈接

主旨

此次本文旨在討論：vue

react 組件更新的原理

術語定義

組件更新：組件進行了重渲染，其渲染階段至少通過了 render 函數和 tree diff 階段。

react 組件更新的原理

首先，咱們先闡述下 react 組件更新的策略：一個組件發生了更新，其子組件也會更新，在不進行優化的狀況下，這種更新的傳遞會持續到組件樹的葉子組件，即便某個子組件先後props並無發生改變。react

而後，讓咱們肯定下什麼能夠引發組件更新(針對react 16)：api

useState/useReducer hook
類組件 this.setState
父組件更新(props 變化)

1. useState/useReducer hook

因爲 useReducer 的 api 過於繁瑣，爲了敘述的方便，這裏使用 useState 舉例子。數組

這一節中，我使用 setState 指代 useState hook 返回的 setState 函數，而 this.setState 指代類組件的 setState 函數。promise

關於 useState hook 須要注意的幾點：異步

hooks 給了函數組件和類組件同樣保存狀態的能力，天然而然的，既然能夠保存狀態就應該能夠更改狀態，useState 返回的 setState 能夠用於改變相關的狀態，自此函數組件和類組件同樣，一樣具備了主動發起更新的能力。函數
react 官方認爲 useState hook 應該用於更加細粒度的值，因此 useState 和基本的值類型數據配合良好，可是若是牽扯 object 類型，就須要做出一些額外的考慮：優化
- useState hook 的 setState 和 this.setState 的行爲並不同，其中很重要的一點，對於 this.setState，會對先後的 state 進行合併，因此當咱們 this.setState 時，只要寫上更改的數據便可，而 useState hook 的 setState 則是替換。因此，當你使用 useState 來保存 object 時，你可能會須要寫上大量的 ... 運算符。
setState 和 this.setState 阻止更新的行爲不同。不一樣於 this.setState(null)，setState(null) 依舊會觸發更新，而且會把 state 賦值成 null。當你使用 setState 時，react 會將先後的 state 進行 === 比較，若是同樣，則不會觸發更新。因此若是你使用 useState 保存 object，即便新的 object 中的值沒有發生變化，可是因爲生成了新的引用，依舊會觸發更新。這也是爲何儘可能不要使用 useState 來儲存 object，對於複雜的本地狀態，建議使用 useReducer 來管理。this

2. 類組件 this.setState

關於 this.setState 須要的注意的是：spa

設置空對象 this.setState({}) 依舊會觸發更新
this.setState(null) 不會觸發更新
this.setState 同步異步問題：
- 在事件處理函數，或生命週期函數，react 會對 this.setState 做 batching 優化，此時 this.setState 是異步的。
- 其餘時候，例如 setTimeout 或 promise 中，this.setState 是同步的。

3. 父組件更新(props 變化)

這是我想咬文嚼字的一節，在閱讀 react 相關文章時，常常會看到 props變化，致使組件發生了更新，這聽起來似乎 react 在更新時會對比先後的 props，只有發生了變化時纔會更新組件。又或者有過 vue 經驗的新人，可能認爲 react 對 props 對象進行了監聽，因此發生變化時纔會更新，然而，以上兩種解釋都是錯誤的。

function Box(props) {
    const { count } = props;
    return <div>{count}</div>;
}

function Counter() {
    const [count, setCount] = useState(0);

    const [useLessCount, setUseLessCount] = useState(0);

    return (
        <div> <Box count={count} /> <button onClick={() => setCount(prev => prev + 1)}>INC</button> <button onClick={() => setUseLessCount(prev => prev + 1)}>useLess</button> </div> ); } 複製代碼