React函數式組件的性能優化
優化思路
主要優化的方向有2個:
- 減少重新 render 的次數。因為在 React 里最重(花時間最長)的一塊就是 reconction(簡單的可以理解為 diff),如果不 render,就不會 reconction。
- 減少計算的量。主要是減少重複計算,對於函數式組件來說,每次 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 (
<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 (
<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, 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函數不再重複計算
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也是會消耗一些性能,盲目使用反而會適得其反
參考閱讀
文章最後
本文作者阿健Kerry,高級前端工程師,轉載請註明出處。如果覺得本文對你有幫助,記得點贊三連哦,也可以掃碼關注我新建立的前端技術公眾號【有你前端】,之後我所有文章會同步發到這個公眾號上面。另外,我建了一個可以幫助咱們程式設計師脫單的公眾號,每周都會推送幾個優秀的單身小姐姐,如果你是程式設計師技術好又正好是單身,那你可以下面掃碼關注【緣來你是程式猿】公眾號開啟你的脫單之旅。