優化思路

主要優化的方向有2個：

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

在使用類元件的時候，使用的 React 優化 API 主要是：shouldComponentUpdate和 PureComponent

那麼在函式式元件中，我們怎麼做效能優化？主要用到下面幾個方法去優化

• React.memo
• useCallback
• useMemo

React.memo

看個例子：

我們在父元件中放一個按鈕用於修改子標題，並引入Child子元件

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

當點選修改子標題，Child子元件也列印了，造成了不必要的重複渲染次數

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

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


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

優化一下，使用React.memo包裹子元件

import React from "react";

const Child = ()=>{
    console.log('我是子元件')
    return (
        <div>我是子元件</div>
    )
程式設計客棧}
export default React.memo(Child)

再觀察一下，發現Child子元件沒有重複渲染了

useCallback

這裡我們再改造一下，給Child子元件新增一個onclick事件，然後點選修改子標題按鈕，發現我們的Child子元件又重新渲染了，這裡主要是因為修改子標題的時候handlerClick函式重新渲染變化，造成子元件重新渲染

// 父元件
const Index = ()=>{
    const [subTitle,setSubTitle] = useState('我是子標題')
    const updateSubTitle = ()=>{
      setSubTitle('修改子標題')
    }
    const handlerClick = ()=>{
      console.log('子元件點選')
    }
    return (
      <div>
        <div>函式式元件效能優化</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)

優化一下，使用useCallback包裹處理子元件的handlerClick函式，再次點選updateSubTitle修改子標題，發現Child子元件沒有重新再渲染

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

    return (
 FmubeZz     <div>
        <div>函式式元件效能優化</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])

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

useMemo

useMemo用於計算結果快取

我們先看個例子，在之前基礎上新增一個calcCount計算函式，然後點選updateSubTitle更新子標題，發現calcCount重新計算了，也就是每次渲染都會造成重複計算，如果是計算量比較大的情況下，會極大的影響效能

// 父元件
const Index = ()=>{
    const [subTitle,[])

    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>函式式元件效能優化</div>
        <div>{subTitle}</div>
        <button onClick={updateSubTitle}>修改子標題</button>
        <div>count:{count}</div>
        <Child onClick={handlerClick}/>
      </div>
    );
  }

優化一下，使用useMemo快取計算結果,我們再次點選updateSubTitle修改子標題按鈕，可以發現calcCount函式不再重複計算

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

    const count = useMemo(calcCount,[])www.cppcns.com

最後，需要注意的是不能盲目的使用useMemo，要根據具體的FmubeZz場景，比如對於一個數據計算量比較大，那麼使用是比較適用的，而對於普通的一些值得計算，可以不使用，因為本身useMemo也是會消耗一些效能，盲目使用反而會適得其反

參考閱讀

https://mp.weixin.qq.com/s/YGvmSrr-yhPUNHbwlLSFsA

http://www.ptbird.cn/react-hook-useMemo-purerender.html

到此這篇關於React函式式元件的效能優化的文章就介紹到這了,更多相關React效能優化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！