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

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

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

優(yōu)化思路

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

減少重新 render 的次數(shù)。因?yàn)樵?React 里最重(花時(shí)間最長(zhǎng))的一塊就是 reconction(簡(jiǎn)單的可以理解為 diff)，如果不 render，就不會(huì) reconction。
減少計(jì)算的量。主要是減少重復(fù)計(jì)算，對(duì)于函數(shù)式組件來(lái)說(shuō)，每次 render 都會(huì)重新從頭開始執(zhí)行函數(shù)調(diào)用。

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

那么在函數(shù)式組件中，我們?cè)趺醋鲂阅軆?yōu)化？主要用到下面幾個(gè)方法去優(yōu)化

React.memo
useCallback
useMemo

React.memo

看個(gè)例子：

我們?cè)诟附M件中放一個(gè)按鈕用于修改子標(biāo)題，并引入Child子組件

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

當(dāng)點(diǎn)擊修改子標(biāo)題，Child子組件也打印了，造成了不必要的重復(fù)渲染次數(shù)

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

import Child from "./Child";
const Index = ()=>{
    const [subTitle, setSubTitle] = useState('我是子標(biāo)題')
    const updateSubTitle = ()=>{
      setSubTitle('修改子標(biāo)題')
    }
    return (
      <div>
        <div>函數(shù)式組件性能優(yōu)化</div>
        <div>{subTitle}</div>
        <button onClick={updateSubTitle}>修改子標(biāo)題</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子組件沒有重復(fù)渲染了

useCallback

這里我們?cè)俑脑煲幌拢oChild子組件添加一個(gè)onclick事件，然后點(diǎn)擊修改子標(biāo)題按鈕，發(fā)現(xiàn)我們的Child子組件又重新渲染了，這里主要是因?yàn)樾薷淖訕?biāo)題的時(shí)候handlerClick函數(shù)重新渲染變化，造成子組件重新渲染

// 父組件
const Index = ()=>{
    const [subTitle, setSubTitle] = useState('我是子標(biāo)題')
    const updateSubTitle = ()=>{
      setSubTitle('修改子標(biāo)題')
    }
    const handlerClick = ()=>{
      console.log('子組件點(diǎn)擊')
    }
    return (
      <div>
        <div>函數(shù)式組件性能優(yōu)化</div>
        <div>{subTitle}</div>
        <button onClick={updateSubTitle}>修改子標(biāo)題</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ù)，再次點(diǎn)擊updateSubTitle修改子標(biāo)題，發(fā)現(xiàn)Child子組件沒有重新再渲染

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

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

這里關(guān)于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ì)更新。

useMemo

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

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

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

    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}>修改子標(biāo)題</button>
        <div>count:{count}</div>
        <Child onClick={handlerClick}/>
      </div>
    );
  }

優(yōu)化一下，使用useMemo緩存計(jì)算結(jié)果,我們?cè)俅吸c(diǎn)擊updateSubTitle修改子標(biāo)題按鈕，可以發(fā)現(xiàn)calcCount函數(shù)不再重復(fù)計(jì)算

 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ù)具體的場(chǎng)景，比如對(duì)于一個(gè)數(shù)據(jù)計(jì)算量比較大，那么使用是比較適用的，而對(duì)于普通的一些值得計(jì)算，可以不使用，因?yàn)楸旧韚seMemo也是會(huì)消耗一些性能，盲目使用反而會(huì)適得其反