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

1. 要么是組件自己的狀態(tài)改變

2. 要么是父組件重新渲染，導(dǎo)致子組件重新渲染，但是父組件的 props 沒有改版

3. 要么是父組件重新渲染，導(dǎo)致子組件重新渲染，但是父組件傳遞的 props 改變

接下來用排除法查出是什么原因?qū)е碌模?/p>

第一種很明顯就排除了，當(dāng)點(diǎn)擊改副標(biāo)題 的時(shí)候并沒有去改變 Child 組件的狀態(tài)；

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

那么就是第三種情況了，當(dāng)父組件重新渲染的時(shí)候，傳遞給子組件的 props 發(fā)生了改變，再看傳遞給 Child 組件的就兩個(gè)屬性，一個(gè)是 name，一個(gè)是 onClick ，name 是傳遞的常量，不會(huì)變，變的就是 onClick 了，為什么傳遞給 onClick 的 callback 函數(shù)會(huì)發(fā)生改變呢？在文章的開頭就已經(jīng)說過了，在函數(shù)式組件里每次重新渲染，函數(shù)組件都會(huì)重頭開始重新執(zhí)行，那么這兩次創(chuàng)建的 callback 函數(shù)肯定發(fā)生了改變，所以導(dǎo)致了子組件重新渲染。

如何解決

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

useCallback 使用方法

const callback = () => {
  doSomething(a, b);
}

const memoizedCallback = useCallback(callback, [a, b])

把函數(shù)以及依賴項(xiàng)作為參數(shù)傳入 useCallback，它將返回該回調(diào)函數(shù)的 memoized 版本，這個(gè) memoizedCallback 只有在依賴項(xiàng)有變化的時(shí)候才會(huì)更新。

那么可以將 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("這是一個(gè) title");
  const [subtitle, setSubtitle] = useState("我是一個(gè)副標(biāo)題");

  const callback = () => {
    setTitle("標(biāo)題改變了");
  };

  // 通過 useCallback 進(jìn)行記憶 callback，并將記憶的 callback 傳遞給 Child
  const memoizedCallback = useCallback(callback, [])

  return (
    <div className="App">
      <h1>{title}</h1>
      <h2>{subtitle}</h2>
      <button onClick={() => setSubtitle("副標(biāo)題改變了")}>改副標(biāo)題</button>
      <Child onClick={memoizedCallback} name="桃桃" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

這樣我們就可以看到只會(huì)在首次渲染的時(shí)候打印出桃桃，當(dāng)點(diǎn)擊改副標(biāo)題和改標(biāo)題的時(shí)候是不會(huì)打印桃桃的。

如果我們的 callback 傳遞了參數(shù)，當(dāng)參數(shù)變化的時(shí)候需要讓它重新添加一個(gè)緩存，可以將參數(shù)放在 useCallback 第二個(gè)參數(shù)的數(shù)組中，作為依賴的形式，使用方式跟 useEffect 類似。

useMemo

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

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

function App() {
  const [num, setNum] = useState(0);

  // 一個(gè)非常耗時(shí)的一個(gè)計(jì)算函數(shù)
  // 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>
  );
}

首次渲染的效果如下：

這個(gè)例子功能很簡(jiǎn)單，就是點(diǎn)擊 +1 按鈕，然后會(huì)將現(xiàn)在的值(num) 與 計(jì)算函數(shù) (expensiveFn) 調(diào)用后的值相加，然后將和設(shè)置給 num 并顯示出來，在控制臺(tái)會(huì)輸出 49995000。

可能產(chǎn)生性能問題

就算是一個(gè)看起來很簡(jiǎn)單的組件，也有可能產(chǎn)生性能問題，通過這個(gè)最簡(jiǎn)單的例子來看看還有什么值得優(yōu)化的地方。

首先我們把 expensiveFn 函數(shù)當(dāng)做一個(gè)計(jì)算量很大的函數(shù)(比如你可以把 i 換成 10000000)，然后當(dāng)我們每次點(diǎn)擊 +1 按鈕的時(shí)候，都會(huì)重新渲染組件，而且都會(huì)調(diào)用 expensiveFn 函數(shù)并輸出 49995000。由于每次調(diào)用 expensiveFn 所返回的值都一樣，所以我們可以想辦法將計(jì)算出來的值緩存起來，每次調(diào)用函數(shù)直接返回緩存的值，這樣就可以做一些性能優(yōu)化。

useMemo 做計(jì)算結(jié)果緩存

針對(duì)上面產(chǎn)生的問題，就可以用 useMemo 來緩存 expensiveFn 函數(shù)執(zhí)行后的值。

首先介紹一下 useMemo 的基本的使用方法，詳細(xì)的使用方法可見官網(wǎng)：

function computeExpensiveValue() {
  // 計(jì)算量很大的代碼
  return xxx
}

const memoizedValue = useMemo(computeExpensiveValue, [a, b]);

useMemo 的第一個(gè)參數(shù)就是一個(gè)函數(shù)，這個(gè)函數(shù)返回的值會(huì)被緩存起來，同時(shí)這個(gè)值會(huì)作為 useMemo 的返回值，第二個(gè)參數(shù)是一個(gè)數(shù)組依賴，如果數(shù)組里面的值有變化，那么就會(huì)重新去執(zhí)行第一個(gè)參數(shù)里面的函數(shù)，并將函數(shù)返回的值緩存起來并作為 useMemo 的返回值 。

了解了 useMemo 的使用方法，然后就可以對(duì)上面的例子進(jìn)行優(yōu)化，優(yōu)化代碼如下：

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>
  );
}

執(zhí)行上面的代碼，然后現(xiàn)在可以觀察無論我們點(diǎn)擊 +1多少次，只會(huì)輸出一次 49995000，這就代表 expensiveFn 只執(zhí)行了一次，達(dá)到了我們想要的效果。

小結(jié)

useMemo 的使用場(chǎng)景主要是用來緩存計(jì)算量比較大的函數(shù)結(jié)果，可以避免不必要的重復(fù)計(jì)算，有過 vue 的使用經(jīng)歷同學(xué)可能會(huì)覺得跟 Vue 里面的計(jì)算屬性有異曲同工的作用。

不過另外提醒兩點(diǎn)

一、如果沒有提供依賴項(xiàng)數(shù)組，useMemo 在每次渲染時(shí)都會(huì)計(jì)算新的值；

二、計(jì)算量如果很小的計(jì)算函數(shù)，也可以選擇不使用 useMemo，因?yàn)檫@點(diǎn)優(yōu)化并不會(huì)作為性能瓶頸的要點(diǎn)，反而可能使用錯(cuò)誤還會(huì)引起一些性能問題。

總結(jié)

對(duì)于性能瓶頸可能對(duì)于小項(xiàng)目遇到的比較少，畢竟計(jì)算量小、業(yè)務(wù)邏輯也不復(fù)雜，但是對(duì)于大項(xiàng)目，很可能是會(huì)遇到性能瓶頸的，但是對(duì)于性能優(yōu)化有很多方面：網(wǎng)絡(luò)、關(guān)鍵路徑渲染、打包、圖片、緩存等等方面，具體應(yīng)該去優(yōu)化哪方面還得自己去排查，本文只介紹了性能優(yōu)化中的冰山一角：運(yùn)行過程中 React 的優(yōu)化。

1. React 的優(yōu)化方向：減少 render 的次數(shù)；減少重復(fù)計(jì)算。
2. 如何去找到 React 中導(dǎo)致性能問題的方法，見 useCallback 部分。
3. 合理的拆分組件其實(shí)也是可以做性能優(yōu)化的，你這么想，如果你整個(gè)頁面只有一個(gè)大的組件，那么當(dāng) props 或者 state 變更之后，需要 reconciliation 的是整個(gè)組件，其實(shí)你只是變了一個(gè)文字，如果你進(jìn)行了合理的組件拆分，你就可以控制更小粒度的更新。

合理拆分組件還有很多其他好處，比如好維護(hù)，而且這是學(xué)習(xí)組件化思想的第一步，合理的拆分組件又是一門藝術(shù)了，如果拆分得不合理，就有可能導(dǎo)致狀態(tài)混亂，多敲代碼多思考。