優(yōu)化思路
主要優(yōu)化的方向有2個：
- 減少重新 render 的次數(shù)。因為在 React 里最重(花時間最長)的一塊就是 reconction(簡單的可以理解為 diff)，如果不 render，就不會 reconction。
- 減少計算的量。主要是減少重復(fù)計算，對于函數(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('我是子組件')
當(dāng)點擊修改子標題，Child子組件也打印了，造成了不必要的重復(fù)渲染次數(shù)
|
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>函數(shù)式組件性能優(yōu)化</div> <div>{subTitle}</div> <button onClick={updateSubTitle}>修改子標題</button> <Child/> </div> ); } export default Index;//子組件Child.jsconst Child = ()=>{ console.log('我是子組件') return ( <div>我是子組件</div> )}export default Child |
優(yōu)化一下，使用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) |
再觀察一下，發(fā)現(xiàn)Child子組件沒有重復(fù)渲染了
useCallback
這里我們再改造一下，給Child子組件添加一個onclick事件，然后點擊修改子標題按鈕，發(fā)現(xiàn)我們的Child子組件又重新渲染了，這里主要是因為修改子標題的時候handlerClick函數(shù)重新渲染變化，造成子組件重新渲染
|
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>函數(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子組件沒有重新再渲染
|
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>函數(shù)式組件性能優(yōu)化</div> <div>{subTitle}</div> <button onClick={updateSubTitle}>修改子標題</button> <Child onClick={handlerClick}/> </div> ); } export default Index; |
這里關(guān)于useCallback的用法
|
1
2
3
4
5
|
const callback = () => { doSomething(a, b);}const memoizedCallback = useCallback(callback, [a, b]) |
把函數(shù)以及依賴項作為參數(shù)傳入 useCallback，它將返回該回調(diào)函數(shù)的 memoized 版本，這個 memoizedCallback 只有在依賴項有變化的時候才會更新。
useMemo
useMemo用于計算結(jié)果緩存
我們先看個例子，在之前基礎(chǔ)上添加一個calcCount計算函數(shù)，然后點擊updateSubTitle更新子標題，發(fā)現(xiàn)calcCount重新計算了，也就是每次渲染都會造成重復(fù)計算，如果是計算量比較大的情況下，會極大的影響性能
|
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>函數(shù)式組件性能優(yōu)化</div> <div>{subTitle}</div> <button onClick={updateSubTitle}>修改子標題</button> <div>count:{count}</div> <Child onClick={handlerClick}/> </div> ); } |
優(yōu)化一下，使用useMemo緩存計算結(jié)果,我們再次點擊updateSubTitle修改子標題按鈕，可以發(fā)現(xiàn)calcCount函數(shù)不再重復(fù)計算
|
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，要根據(jù)具體的場景，比如對于一個數(shù)據(jù)計算量比較大，那么使用是比較適用的，而對于普通的一些值得計算，可以不使用，因為本身useMemo也是會消耗一些性能，盲目使用反而會適得其反
參考閱讀
https://mp.weixin.qq.com/s/YGvmSrr-yhPUNHbwlLSFsA
http://www.ptbird.cn/react-hook-useMemo-purerender.html
到此這篇關(guān)于React函數(shù)式組件的性能優(yōu)化的文章就介紹到這了,更多相關(guān)React性能優(yōu)化內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://www.cnblogs.com/fozero/p/14696733.html
