React函數(shù)式組件的性能優(yōu)化思路詳解

更新時間：2021年04月25日 09:24:43 作者：fozero

這篇文章主要介紹了React函數(shù)式組件的性能優(yōu)化思路詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

優(yōu)化思路

主要優(yōu)化的方向有2個：

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

在使用類組件的時候，使用的 React 優(yōu)化 API 主要是：shouldComponentUpdate和 PureComponent

那么在函數(shù)式組件中，我們怎么做性能優(yōu)化？主要用到下面幾個方法去優(yōu)化

React.memo
useCallback
useMemo

React.memo

看個例子：

我們在父組件中放一個按鈕用于修改子標題，并引入Child子組件

可以看到，第一次進來子組件打印了console.log('我是子組件')

當點擊修改子標題，Child子組件也打印了，造成了不必要的重復渲染次數(shù)

//父組件
import {useState} from 'react'

import Child from "./Child";
const Index = ()=>{
    const [subTitle, setSubTitle] = useState('我是子標題')
    const updateSubTitle = ()=>{
      setSubTitle('修改子標題')
    }
    return (
      <div>
        <div>函數(shù)式組件性能優(yōu)化</div>
        <div>{subTitle}</div>
        <button onClick={updateSubTitle}>修改子標題</button>
        <Child/>
      </div>
    );
  }
  
  export default Index;


//子組件Child.js
const Child = ()=>{
    console.log('我是子組件')
    return (
        <div>我是子組件</div>
    )
}
export default Child

優(yōu)化一下，使用React.memo包裹子組件

import React from "react";

const Child = ()=>{
    console.log('我是子組件')
    return (
        <div>我是子組件</div>
    )
}
export default React.memo(Child)

再觀察一下，發(fā)現(xiàn)Child子組件沒有重復渲染了

useCallback

這里我們再改造一下，給Child子組件添加一個onclick事件，然后點擊修改子標題按鈕，發(fā)現(xiàn)我們的Child子組件又重新渲染了，這里主要是因為修改子標題的時候handlerClick函數(shù)重新渲染變化，造成子組件重新渲染

// 父組件
const Index = ()=>{
    const [subTitle, setSubTitle] = useState('我是子標題')
    const updateSubTitle = ()=>{
      setSubTitle('修改子標題')
    }
    const handlerClick = ()=>{
      console.log('子組件點擊')
    }
    return (
      <div>
        <div>函數(shù)式組件性能優(yōu)化</div>
        <div>{subTitle}</div>
        <button onClick={updateSubTitle}>修改子標題</button>
        <Child onClick={handlerClick}/>
      </div>
    );
  }

// Child子組件
const Child = (props)=>{
    console.log('我是子組件')
    return (
        <div>
            <div>我是子組件</div>
            <button onClick={props.onClick}>子組件按鈕</button>
        </div>
    )
}
export default React.memo(Child)

優(yōu)化一下，使用useCallback包裹處理子組件的handlerClick函數(shù)，再次點擊updateSubTitle修改子標題，發(fā)現(xiàn)Child子組件沒有重新再渲染

// 父組件
const Index = ()=>{
    const [subTitle, setSubTitle] = useState('我是子標題')
    const updateSubTitle = ()=>{
      setSubTitle('修改子標題')
    }
    const handlerClick = useCallback(()=>{
      console.log('子組件點擊')
    },[])

    return (
      <div>
        <div>函數(shù)式組件性能優(yōu)化</div>
        <div>{subTitle}</div>
        <button onClick={updateSubTitle}>修改子標題</button>
        <Child onClick={handlerClick}/>
      </div>
    );
  }
  
  export default Index;

這里關于useCallback的用法

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

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

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

useMemo

useMemo用于計算結果緩存

我們先看個例子，在之前基礎上添加一個calcCount計算函數(shù)，然后點擊updateSubTitle更新子標題，發(fā)現(xiàn)calcCount重新計算了，也就是每次渲染都會造成重復計算，如果是計算量比較大的情況下，會極大的影響性能

// 父組件
const Index = ()=>{
    const [subTitle, setSubTitle] = useState('我是子標題')
    const updateSubTitle = ()=>{
      setSubTitle('修改子標題')
    }
    const handlerClick = useCallback(()=>{
      console.log('子組件點擊')
    },[])

    const calcCount = ()=>{
      
      let totalCount = 0
      for(let i=0;i<10000;i++){
        totalCount+=i
      }
      console.log('totalCount',totalCount)
      return totalCount
    }

    const count = calcCount()

    return (
      <div>
        <div>函數(shù)式組件性能優(yōu)化</div>
        <div>{subTitle}</div>
        <button onClick={updateSubTitle}>修改子標題</button>
        <div>count:{count}</div>
        <Child onClick={handlerClick}/>
      </div>
    );
  }

優(yōu)化一下，使用useMemo緩存計算結果,我們再次點擊updateSubTitle修改子標題按鈕，可以發(fā)現(xiàn)calcCount函數(shù)不再重復計算

 const calcCount = ()=>{
      
      let totalCount = 0
      for(let i=0;i<10000;i++){
        totalCount+=i
      }
      console.log('totalCount',totalCount)
      return totalCount
    }

    const count = useMemo(calcCount,[])

最后，需要注意的是不能盲目的使用useMemo，要根據(jù)具體的場景，比如對于一個數(shù)據(jù)計算量比較大，那么使用是比較適用的，而對于普通的一些值得計算，可以不使用，因為本身useMemo也是會消耗一些性能，盲目使用反而會適得其反