深入 React 函數組件的 re-render 原理及優化

對於函數組件的 re-render，大致分爲以下三種情況：

• 組件本身使用 useState 或 useReducer 更新，引起的 re-render；

• 父組件更新引起的 re-render；

• 組件本身使用了 useContext，context 更新引起的 re-render。

下面我們將詳細討論這些情況。

PS：如無特殊說明，下面的組件都指函數組件。

1、組件本身使用 useState 或 useReducer 更新，引起的 re-render

1.1、常規使用

以計數組件爲例，如下每次點擊 add，都會打印'counter render'，表示引起了 re-render ：

const Counter = () => {
  console.log('counter render');
  const [count, addCount ] = useState(0);
  return (
    <div class>
      <div class>{count}</div>
      <button onClick={() => {addCount(count + 1)}}>add</button>
    </div>
  )
}

1.2、immutation state

下面我們將上面計數組件中的 state 值改成引用類型試試，如下，發現點擊並不會引起 re-render：

const Counter = () => {
  console.log("counter render");
  const [count, addCount] = useState({ num: 0, time: Date.now() });
  const clickHandler = () => {
    count.num++;
    count.time = Date.now();
    addCount(count);
  };
  return (
    <div class>
      <div class>
        {count.num}, {count.time}
      </div>
      <button onClick={clickHandler}>add</button>
    </div>
  );
};

真實的原因在於，更新 state 的時候，會有一個新老 state 的比較，用的是 Object.is 進行比較，如果爲 true 則直接返回不更新，源碼如下（objectIs 會先判斷 Object.is 是否支持，如果不支持則重新實現，eagerState 就是 oldState ）：

if (objectIs(eagerState, currentState)) {
  return;
}

所以更新 state 時候要注意，state 爲不可變數據，每次更新都需要一個新值纔會有效。

1.3、強制更新

相比於類組件有個 forceUpdate 方法，函數組件是沒有該方法的，但是其實也可以自己寫一個，如下，由於 Object.is({}, {}) 總是 false，所以總能引起更新：

const [, forceUpdate] = useState({});
forceUpdate({})

說完 useState 的更新，其實 useReducer 就不用說了，因爲源碼裏面 useState 的更新其實調用的就是 useReducer 的更新，如下：

function updateState(initialState) {
  return updateReducer(basicStateReducer);
}

2、父組件更新引起子組件的 re-render

2.1、常規使用

現在稍微改造上面計數的組件，添加一個子組件 Hello，如下點擊會發現，每次都會輸出 "hello render"，也就是說，每次更新都引起了 Hello 的 re-render，但是其實 Hello 組件的屬性根本就沒有改變：

const Hello = ({ name }) => {
  console.log("hello render");
  return<div>hello {name}</div>;
};

const App = () => {
  console.log("app render");
  const [count, addCount] = useState(0);
  return (
    <div class>
      <Hello  />
      <div class>{count}</div>
      <button
        onClick={() => {
          addCount(count + 1);
        }}
      >
        add
      </button>
    </div>
  );
};

對於這種不必要的 re-render，我們有手段可以優化，下面具體聊聊。

2.2、優化組件設計

2.2.1、將更新部分抽離成單獨組件

如上，我們可以講計數部分單獨抽離成 Counter 組件，這樣計數組件的更新就影響不到 Hello 組件了，如下：

const App = () => {
  console.log("app render");
  return (
    <div class>
      <Hello  />
      <Counter />
    </div>
  );
};

2.2.2、將不需要 re-render 的部分抽離，以插槽形式渲染（children）

// App 組件預留 children 位
const App = ({ children }) => {
  console.log("app render");
  const [count, addCount] = useState(0);
  return (
    <div class>
        {children}
      <div class>{count}</div>
      <button
        onClick={() => {
          addCount(count + 1);
        }}
      >
        add
      </button>
    </div>
  );
};

// 使用
<App>
  <Hello  />
</App>

除此以外，也可以以其他屬性的方式傳入組件，其本質就是傳入的變量，所以也不會引起 re-render 。

2.3、React.memo

對於是否需要 re-render，類組件提供了兩種方法：PureComponent 組件和 shouldComponentUpdate 生命週期方法。

對於函數組件來說，有一個 React.memo 方法，可以用來決定是否需要 re-render，如下我們將 Hello 組件 memo 化，這樣點擊更新數字的時候， Hello 組件是不會 re-render 的。除非 Hello 組件的 props 更新：

const Hello = React.memo(({ name }) => {
  console.log("hello render");
  return<div>hello {name}</div>;
});

const App = () => {
  console.log("app render");
  const [count, addCount] = useState(0);
  return (
    <div class>
      <Hello  />
      <div class>{count}</div>
      <button
        onClick={() => {
          addCount(count + 1);
        }}
      >
        add
      </button>
    </div>
  );
};

memo 方法的源碼定義簡略如下：

exportfunction memo<Props>(
  type: React$ElementType, // react 自定義組件
  compare?: (oldProps: Props, newProps: Props) => boolean, // 可選的比對函數，決定是否 re-render
) {
    ...
    const elementType = {
    $$typeof: REACT_MEMO_TYPE,
    type,
    compare: compare === undefined ? null : compare,
  };
    ...
  
  return elementType;
}

memo 的關鍵比對邏輯如下，如果有傳入 compare 函數則使用 compare 函數決定是否需要 re-render，否則使用淺比較 shallowEqual 決定是否需要 re-render：

var compare = Component.compare;
compare = compare !== null ? compare : shallowEqual;

if (compare(prevProps, nextProps) && current.ref === workInProgress.ref) {
  return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
}

既然默認不傳 compare 時，用的是淺對比，那麼對於引用類的 props，就要注意了，尤其是事件處理的函數，如下，我們給 Hello 組件添加一個點擊事件，這時我們發現每次點擊計數，Hello 組件又開始 re-render 了：

// 新增 onClick 處理函數
const Hello = memo(({ name, onClick }) => {
  console.log("hello render");
  return<div onClick={onClick}>hello {name}</div>;
});

const App = ({ children }) => {
  console.log("counter render");
  const [count, addCount] = useState(0);
  
  // 新增處理函數
  const clickHandler = () => {
    console.log("hello click");
  };

  return (
    <div class>
      <Hello  onClick={clickHandler} />
      <div class>{count}</div>
      <button
        onClick={() => {
          addCount(count + 1);
        }}
      >
        add
      </button>
    </div>
  );
};

這是因爲每次點擊計數，都會重新定義 clickHandler 處理函數，這樣 shallowEqual 淺比較發現 onClick 屬性值不同，於是將會進行 re-render。

2.3.1、useCallback

這個時候我們可以使用 useCallback 將定義的函數緩存起來，如下就不會引起 re-render 了

// 新增處理函數，使用 useCallback 緩存起來
const clickHandler = useCallback(() => {
  console.log("hello click");
}, []);

useCallback 的原理主要是在掛載的時候，將定義的 callback 函數及 deps 依賴掛載該 hook 的 memoizedState，當更新時，將依賴進行對比，如果依賴沒變，則直接返回老的 callback 函數，否則則更新新的 callback 函數及依賴：

// 掛載時
function mountCallback(callback, deps) {
  var hook = mountWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

// 更新時
function updateCallback(callback, deps) {
  var hook = updateWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  var prevState = hook.memoizedState;

  if (prevState !== null) {
    if (nextDeps !== null) {
      var prevDeps = prevState[1];

      // 如果依賴未變，則直接返回老的函數
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }
  // 否則更新新的 callback 函數
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

看起來好像是沒問題了，但是如果我們在剛纔 callback 函數中使用了 count 這個 state 值呢？

// 新增處理函數，使用 useCallback 緩存起來
// 在 callback 函數中使用 count
const clickHandler = useCallback(() => {
  console.log("count: ", count);
}, []);

當我們點擊了幾次計數，然後再點擊 Hello 組件時，會發現我們打印的 count 還是掛載時候的值，而不是最新的 count 值。其實，這都是是閉包惹得禍（具體解釋可參考：Be Aware of Stale Closures when Using React Hooks）。所以爲了讓 callback 函數中可以使用最新的 state，我們還要將該 state 放入 deps 依賴，但是這樣依賴更新了，callback 函數也將會更新，於是 Hello 組件又將會 re-render，這又回到了從前。

// 新增處理函數，使用 useCallback 緩存起來
// 在 callback 函數中使用 count
// 並將 count 添加進依賴
// 只要 count 更新，callback 函數又將更新，useCallback 就沒什麼用了
const clickHandler = useCallback(() => {
  console.log("count: ", count);
}, [count]);

這樣我們得出了一個結論：當 callback 函數需要使用 state 值時，如果是 state 值更新引起的更新，useCallback 其實是沒有任何效果的。

2.3.2、useRef & useEffect

爲了解決剛纔的 useCallback 的閉包問題，我們換一個方式，引入 useRef 和 useEffect 來解決該問題：

const App = ({ children }) => {
  console.log("counter render");
  const [count, addCount] = useState(0);
  
  // 1、創建一個 countRef 
  const countRef = useRef(count);
  
  // 2、依賴改成 countRef
  // 淺對比 countRef 時，將不會引起 callback 函數更新
  // callback 函數又中可以讀取到 countRef.current 值，即 count 的最新值
  const clickHandler = useCallback(() => {
    console.log("count: ", countRef.current);
  }, [countRef]);
  
  // 3、當 count 更新時，更新 countRef 的值
  useEffect(() => {
      countRef.current = count;
  }, [count]);

  return (
    <div class>
      <Hello  onClick={clickHandler} />
      <div class>{count}</div>
      <button
        onClick={() => {
          addCount(count + 1);
        }}
      >
        add
      </button>
    </div>
  );
};

該方案總結如下：

• 通過 useRef 來保存變化的值；

• 通過 useEffect 來更新變化的值；

• 通過 useCallback 來返回固定的 callback。

useRef 保存值的原理如下：

// 掛載 ref
function mountRef(initialValue) {
  var hook = mountWorkInProgressHook();
  
  // 創建一個 ref 對象，將值掛在 current 屬性上
  var ref = {
    current: initialValue
  };

  {
    Object.seal(ref);
  }
    
  // 將 ref 掛到 hook 的 memoizedState 屬性上，並返回
  hook.memoizedState = ref; 
  return ref;
}

// 更新 ref
function updateRef(initialValue) {
  var hook = updateWorkInProgressHook();
  return hook.memoizedState; // 直接返回 ref
}

PS：注意不要跟 hooks API 中的 React.useMemo 搞混，這是兩個完全不一樣的東西。

3、context 更新，引起的 re-render

其實關於 context，我們平時都有在用，如 react-redux，react-router 都運用了 context 來進行狀態管理。

其涉及內容比較多也比較複雜，一時半會也說不清，這裏就直接推薦一篇文章吧：React Context 源碼淺析。

參考資料

• react 最新文檔： managing state

• 一直以來 useCallback 的使用姿勢都不對

• React Context 源碼淺析

• Be Aware of Stale Closures when Using React Hooks

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/fcDkJYHBLcenilvZMPCwfA