優化思路
主要優化的方向有2個：
- 減少重新 render 的次數。因為在 React 里最重(花時間最長)的一塊就是 reconction(簡單的可以理解為 diff)，如果不 render，就不會 reconction。
- 減少計算的量。主要是減少重復計算，對于函數式組件來說，每次 render 都會重新從頭開始執行函數調用。
在使用類組件的時候，使用的 React 優化 API 主要是：shouldComponentUpdate和 PureComponent
那么在函數式組件中，我們怎么做性能優化？主要用到下面幾個方法去優化
- React.memo
- useCallback
- useMemo
React.memo
看個例子：
我們在父組件中放一個按鈕用于修改子標題，并引入Child子組件
可以看到，第一次進來子組件打印了console.log('我是子組件')
當點擊修改子標題，Child子組件也打印了，造成了不必要的重復渲染次數
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
//父組件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.jsconst Child = ()=>{ console.log('我是子組件') return ( <div>我是子組件</div> )}export default Child |
優化一下，使用React.memo包裹子組件
|
1
2
3
4
5
6
7
8
9
|
import React from "react";const Child = ()=>{ console.log('我是子組件') return ( <div>我是子組件</div> )}export default React.memo(Child) |
再觀察一下，發現Child子組件沒有重復渲染了
useCallback
這里我們再改造一下，給Child子組件添加一個onclick事件，然后點擊修改子標題按鈕，發現我們的Child子組件又重新渲染了，這里主要是因為修改子標題的時候handlerClick函數重新渲染變化，造成子組件重新渲染
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
// 父組件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子組件沒有重新再渲染
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// 父組件const Index = ()=>{ const [subTitle, setSubTitle] = useState('我是子標題') const updateSubTitle = ()=>{ setSubTitle('修改子標題') } const handlerClick = useCallback(()=>{ console.log('子組件點擊') },[]) return ( <div> <div>函數式組件性能優化</div> <div>{subTitle}</div> <button onClick={updateSubTitle}>修改子標題</button> <Child onClick={handlerClick}/> </div> ); } export default Index; |
這里關于useCallback的用法
|
1
2
3
4
5
|
const callback = () => { doSomething(a, b);}const memoizedCallback = useCallback(callback, [a, b]) |
把函數以及依賴項作為參數傳入 useCallback，它將返回該回調函數的 memoized 版本，這個 memoizedCallback 只有在依賴項有變化的時候才會更新。
useMemo
useMemo用于計算結果緩存
我們先看個例子，在之前基礎上添加一個calcCount計算函數，然后點擊updateSubTitle更新子標題，發現calcCount重新計算了，也就是每次渲染都會造成重復計算，如果是計算量比較大的情況下，會極大的影響性能
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
// 父組件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>函數式組件性能優化</div> <div>{subTitle}</div> <button onClick={updateSubTitle}>修改子標題</button> <div>count:{count}</div> <Child onClick={handlerClick}/> </div> ); } |
優化一下，使用useMemo緩存計算結果,我們再次點擊updateSubTitle修改子標題按鈕，可以發現calcCount函數不再重復計算
|
1
2
3
4
5
6
7
8
9
10
11
|
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，要根據具體的場景，比如對于一個數據計算量比較大，那么使用是比較適用的，而對于普通的一些值得計算，可以不使用，因為本身useMemo也是會消耗一些性能，盲目使用反而會適得其反
參考閱讀
https://mp.weixin.qq.com/s/YGvmSrr-yhPUNHbwlLSFsA
http://www.ptbird.cn/react-hook-useMemo-purerender.html
到此這篇關于React函數式組件的性能優化的文章就介紹到這了,更多相關React性能優化內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/fozero/p/14696733.html
