React 函數式組件性能優化指南

2019 年 11 月 27 日
筆記

前言

目的

本文只介紹函數式組件特有的性能優化方式，類組件和函數式組件都有的不介紹，比如 key 的使用。另外本文不詳細的介紹 API 的使用，後面也許會寫，其實想用好 hooks 還是蠻難的。

面向讀者

有過 React 函數式組件的實踐，並且對 hooks 有過實踐，對 useState、useCallback、useMemo API 至少看過文檔，如果你有過對類組件的性能優化經歷，那麼這篇文章會讓你有種熟悉的感覺。

React 性能優化思路

我覺得 React 性能優化的理念的主要方向就是這兩個：

減少重新 render 的次數。因為在 React 里最重(花時間最長)的一塊就是 reconction(簡單的可以理解為 diff)，如果不 render，就不會 reconction。
減少計算的量。主要是減少重複計算，對於函數式組件來說，每次 render 都會重新從頭開始執行函數調用。

在使用類組件的時候，使用的 React 優化 API 主要是：shouldComponentUpdate和 PureComponent，這兩個 API 所提供的解決思路都是為了減少重新 render 的次數，主要是減少父組件更新而子組件也更新的情況，雖然也可以在 state 更新的時候阻止當前組件渲染，如果要這麼做的話，證明你這個屬性不適合作為 state，而應該作為靜態屬性或者放在 class 外面作為一個簡單的變數。

但是在函數式組件裡面沒有聲明周期也沒有類，那如何來做性能優化呢？

React.memo

首先要介紹的就是 React.memo，這個 API 可以說是對標類組件裡面的 PureComponent，這是可以減少重新 render 的次數的。

可能產生性能問題的例子

舉個 ?，首先我們看兩段程式碼：

在根目錄有一個 index.js，程式碼如下，實現的東西大概就是：上面一個 title，中間一個 button(點擊 button 修改 title)，下面一個木偶組件，傳遞一個 name 進去。

// index.js  import React, { useState } from "react";  import ReactDOM from "react-dom";  import Child from './child'    function App() {    const [title, setTitle] = useState("這是一個 title")      return (      <div className="App">        <h1>{ title }</h1>        <button onClick={() => setTitle("title 已經改變")}>改名字</button>        <Child name="桃桃"></Child>      </div>    );  }    const rootElement = document.getElementById("root");  ReactDOM.render(<App />, rootElement);

在同級目錄有一個 child.js

// child.js  import React from "react";    function Child(props) {    console.log(props.name)    return <h1>{props.name}</h1>  }    export default Child

當首次渲染的時候的效果如下：

image-20191030221223045

並且控制台會列印"桃桃」，證明 Child 組件渲染了。

接下來點擊改名字這個 button，頁面會變成：

image-20191030222021717

title 已經改變了，而且控制台也列印出"桃桃"，可以看到雖然我們改的是父組件的狀態，父組件重新渲染了，並且子組件也重新渲染了。你可能會想，傳遞給 Child 組件的 props 沒有變，要是 Child 組件不重新渲染就好了，為什麼會這麼想呢？

我們假設 Child 組件是一個非常大的組件，渲染一次會消耗很多的性能，那麼我們就應該盡量減少這個組件的渲染，否則就容易產生性能問題，所以子組件如果在 props 沒有變化的情況下，就算父組件重新渲染了，子組件也不應該渲染。

那麼我們怎麼才能做到在 props 沒有變化的時候，子組件不渲染呢？

答案就是用 React.memo 在給定相同 props 的情況下渲染相同的結果，並且通過記憶組件渲染結果的方式來提高組件的性能表現。

React.memo 的基礎用法

把聲明的組件通過React.memo包一層就好了，React.memo其實是一個高階函數，傳遞一個組件進去，返回一個可以記憶的組件。

function Component(props) {     /* 使用 props 渲染 */  }  const MyComponent = React.memo(Component);

那麼上面例子的 Child 組件就可以改成這樣：

import React from "react";    function Child(props) {    console.log(props.name)    return <h1>{props.name}</h1>  }    export default React.memo(Child)

通過 React.memo 包裹的組件在 props 不變的情況下，這個被包裹的組件是不會重新渲染的，也就是說上面那個例子，在我點擊改名字之後，僅僅是 title 會變，但是 Child 組件不會重新渲染（表現出來的效果就是 Child 裡面的 log 不會在控制台列印出來），會直接復用最近一次渲染的結果。

這個效果基本跟類組件裡面的 PureComponent效果極其類似，只是前者用於函數組件，後者用於類組件。

React.memo 高級用法

默認情況下其只會對 props 的複雜對象做淺層對比(淺層對比就是只會對比前後兩次 props 對象引用是否相同，不會對比對象裡面的內容是否相同)，如果你想要控制對比過程，那麼請將自定義的比較函數通過第二個參數傳入來實現。

function MyComponent(props) {    /* 使用 props 渲染 */  }  function areEqual(prevProps, nextProps) {    /*    如果把 nextProps 傳入 render 方法的返回結果與    將 prevProps 傳入 render 方法的返回結果一致則返回 true，    否則返回 false    */  }  export default React.memo(MyComponent, areEqual);

此部分來自於 React 官網[1]。

如果你有在類組件裡面使用過 `shouldComponentUpdate()`[2] 這個方法，你會對 React.memo 的第二個參數非常的熟悉，不過值得注意的是，如果 props 相等，areEqual 會返回 true；如果 props 不相等，則返回 false。這與 shouldComponentUpdate 方法的返回值相反。

useCallback

現在根據上面的例子，再改一下需求，在上面的需求上增加一個副標題，並且有一個修改副標題的 button，然後把修改標題的 button 放到 Child 組件里。

把修改標題的 button 放到 Child 組件的目的是，將修改 title 的事件通過 props 傳遞給 Child 組件，然後觀察這個事件可能會引起性能問題。

首先看程式碼：

父組件 index.js

// index.js  import React, { useState } from "react";  import ReactDOM from "react-dom";  import Child from "./child";    function App() {    const [title, setTitle] = useState("這是一個 title");    const [subtitle, setSubtitle] = useState("我是一個副標題");      const callback = () => {      setTitle("標題改變了");    };    return (      <div className="App">        <h1>{title}</h1>        <h2>{subtitle}</h2>        <button onClick={() => setSubtitle("副標題改變了")}>改副標題</button>        <Child onClick={callback} name="桃桃" />      </div>    );  }    const rootElement = document.getElementById("root");  ReactDOM.render(<App />, rootElement);

子組件 child.js

import React from "react";    function Child(props) {    console.log(props);    return (      <>        <button onClick={props.onClick}>改標題</button>        <h1>{props.name}</h1>      </>    );  }    export default React.memo(Child);

首次渲染的效果

image-20191031235605228

這段程式碼在首次渲染的時候會顯示上圖的樣子，並且控制台會列印出桃桃。

然後當我點擊改副標題這個 button 之後，副標題會變為「副標題改變了」，並且控制台會再次列印出桃桃，這就證明了子組件又重新渲染了，但是子組件沒有任何變化，那麼這次 Child 組件的重新渲染就是多餘的，那麼如何避免掉這個多餘的渲染呢？

找原因

我們在解決問題的之前，首先要知道這個問題是什麼原因導致的？

咱們來分析，一個組件重新重新渲染，一般三種情況：

要麼是組件自己的狀態改變
要麼是父組件重新渲染，導致子組件重新渲染，但是父組件的 props 沒有改版
要麼是父組件重新渲染，導致子組件重新渲染，但是父組件傳遞的 props 改變

接下來用排除法查出是什麼原因導致的：

第一種很明顯就排除了，當點擊改副標題 的時候並沒有去改變 Child 組件的狀態；

第二種情況好好想一下，是不是就是在介紹 React.memo 的時候情況，父組件重新渲染了，父組件傳遞給子組件的 props 沒有改變，但是子組件重新渲染了，我們這個時候用 React.memo 來解決了這個問題，所以這種情況也排除。

那麼就是第三種情況了，當父組件重新渲染的時候，傳遞給子組件的 props 發生了改變，再看傳遞給 Child 組件的就兩個屬性，一個是 name，一個是 onClick ，name 是傳遞的常量，不會變，變的就是 onClick 了，為什麼傳遞給 onClick 的 callback 函數會發生改變呢？在文章的開頭就已經說過了，在函數式組件里每次重新渲染，函數組件都會重頭開始重新執行，那麼這兩次創建的 callback 函數肯定發生了改變，所以導致了子組件重新渲染。

如何解決

找到問題的原因了，那麼解決辦法就是在函數沒有改變的時候，重新渲染的時候保持兩個函數的引用一致，這個時候就要用到 useCallback 這個 API 了。

useCallback 使用方法

const callback = () => {    doSomething(a, b);  }    const memoizedCallback = useCallback(callback, [a, b])

把函數以及依賴項作為參數傳入 useCallback，它將返回該回調函數的 memoized 版本，這個 memoizedCallback 只有在依賴項有變化的時候才會更新。

那麼可以將 index.js 修改為這樣：

// index.js  import React, { useState, useCallback } from "react";  import ReactDOM from "react-dom";  import Child from "./child";    function App() {    const [title, setTitle] = useState("這是一個 title");    const [subtitle, setSubtitle] = useState("我是一個副標題");      const callback = () => {      setTitle("標題改變了");    };      // 通過 useCallback 進行記憶 callback，並將記憶的 callback 傳遞給 Child    const memoizedCallback = useCallback(callback, [])      return (      <div className="App">        <h1>{title}</h1>        <h2>{subtitle}</h2>        <button onClick={() => setSubtitle("副標題改變了")}>改副標題</button>        <Child onClick={memoizedCallback} name="桃桃" />      </div>    );  }    const rootElement = document.getElementById("root");  ReactDOM.render(<App />, rootElement);

這樣我們就可以看到只會在首次渲染的時候列印出桃桃，當點擊改副標題和改標題的時候是不會列印桃桃的。

如果我們的 callback 傳遞了參數，當參數變化的時候需要讓它重新添加一個快取，可以將參數放在 useCallback 第二個參數的數組中，作為依賴的形式，使用方式跟 useEffect 類似。

useMemo

在文章的開頭就已經介紹了，React 的性能優化方向主要是兩個：一個是減少重新 render 的次數(或者說減少不必要的渲染)，另一個是減少計算的量。

前面介紹的 React.memo 和 useCallback 都是為了減少重新 render 的次數。對於如何減少計算的量，就是 useMemo 來做的，接下來我們看例子。

function App() {    const [num, setNum] = useState(0);      // 一個非常耗時的一個計算函數    // result 最後返回的值是 49995000    function expensiveFn() {      let result = 0;        for (let i = 0; i < 10000; i++) {        result += i;      }        console.log(result) // 49995000      return result;    }      const base = expensiveFn();      return (      <div className="App">        <h1>count：{num}</h1>        <button onClick={() => setNum(num + base)}>+1</button>      </div>    );  }

首次渲染的效果如下：

useMemo

這個例子功能很簡單，就是點擊 +1 按鈕，然後會將現在的值(num) 與計算函數 (expensiveFn) 調用後的值相加，然後將和設置給 num 並顯示出來，在控制台會輸出 49995000。

可能產生性能問題

就算是一個看起來很簡單的組件，也有可能產生性能問題，通過這個最簡單的例子來看看還有什麼值得優化的地方。

首先我們把 expensiveFn 函數當做一個計算量很大的函數(比如你可以把 i 換成 10000000)，然後當我們每次點擊 +1 按鈕的時候，都會重新渲染組件，而且都會調用 expensiveFn 函數並輸出 49995000。由於每次調用 expensiveFn 所返回的值都一樣，所以我們可以想辦法將計算出來的值快取起來，每次調用函數直接返回快取的值，這樣就可以做一些性能優化。

useMemo 做計算結果快取

針對上面產生的問題，就可以用 useMemo 來快取 expensiveFn 函數執行後的值。

首先介紹一下 useMemo 的基本的使用方法，詳細的使用方法可見官網[3]：

function computeExpensiveValue() {    // 計算量很大的程式碼    return xxx  }    const memoizedValue = useMemo(computeExpensiveValue, [a, b]);

useMemo 的第一個參數就是一個函數，這個函數返回的值會被快取起來，同時這個值會作為 useMemo 的返回值，第二個參數是一個數組依賴，如果數組裡面的值有變化，那麼就會重新去執行第一個參數裡面的函數，並將函數返回的值快取起來並作為 useMemo 的返回值。

了解了 useMemo 的使用方法，然後就可以對上面的例子進行優化，優化程式碼如下：

function App() {    const [num, setNum] = useState(0);      function expensiveFn() {      let result = 0;      for (let i = 0; i < 10000; i++) {        result += i;      }      console.log(result)      return result;    }      const base = useMemo(expensiveFn, []);      return (      <div className="App">        <h1>count：{num}</h1>        <button onClick={() => setNum(num + base)}>+1</button>      </div>    );  }

執行上面的程式碼，然後現在可以觀察無論我們點擊 +1多少次，只會輸出一次 49995000，這就代表 expensiveFn 只執行了一次，達到了我們想要的效果。

小結

useMemo 的使用場景主要是用來快取計算量比較大的函數結果，可以避免不必要的重複計算，有過 vue 的使用經歷同學可能會覺得跟 Vue 裡面的計算屬性有異曲同工的作用。

不過另外提醒兩點一、如果沒有提供依賴項數組，useMemo 在每次渲染時都會計算新的值；二、計算量如果很小的計算函數，也可以選擇不使用 useMemo，因為這點優化並不會作為性能瓶頸的要點，反而可能使用錯誤還會引起一些性能問題。

總結

對於性能瓶頸可能對於小項目遇到的比較少，畢竟計算量小、業務邏輯也不複雜，但是對於大項目，很可能是會遇到性能瓶頸的，但是對於性能優化有很多方面：網路、關鍵路徑渲染、打包、圖片、快取等等方面，具體應該去優化哪方面還得自己去排查，本文只介紹了性能優化中的冰山一角：運行過程中 React 的優化。

React 的優化方向：減少 render 的次數；減少重複計算。
如何去找到 React 中導致性能問題的方法，見 useCallback 部分。
合理的拆分組件其實也是可以做性能優化的，你這麼想，如果你整個頁面只有一個大的組件，那麼當 props 或者 state 變更之後，需要 reconction 的是整個組件，其實你只是變了一個文字，如果你進行了合理的組件拆分，你就可以控制更小粒度的更新。

合理拆分組件還有很多其他好處，比如好維護，而且這是學習組件化思想的第一步，合理的拆分組件又是一門藝術了，如果拆分得不合理，就有可能導致狀態混亂，多敲程式碼多思考。

❤️ 看完三件事

如果你覺得這篇內容對你挺有啟發，我想邀請你幫我三個小忙：

點贊，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）
關注公眾號「前端勸退師」，不定期分享原創知識。
也看看其它文章

也可以來我的GitHub部落格里拿所有文章的源文件：

前端勸退指南：https://github.com/roger-hiro/BlogFN

點贊分享是對作者最大的支援！