react 組件更新分為兩個階段：render 階段和 commit 階段闷哆；因此可以從兩個方面來優(yōu)化組件性能：
阻止組件重渲染 rerender
- 對于 class 組件捞高，使用 shouldComponentUpdate 來阻止 render 方法的執(zhí)行
- 對于函數(shù)式組件优妙，使用 React.memo 來阻止函數(shù)式組件的重復執(zhí)行
- 由于函數(shù)式組件父組件的更新，會導致全部子組件更新(在沒有使用 React.memo 的情況下)墩新；所以需要盡可能的拆分組件崩泡，配合使用 React.memo ，使某一需要更新的子組件不會影響其他子組件
使用 React.memo
- 當父組件傳遞給子組件的 props 沒有實際變更時叉抡，在父組件中使用 useCallback尔崔、useMemo 來保證傳遞給子組件的引用類型的 props 沒有變化；子組件使用 React.memo 才能阻止重復執(zhí)行卜壕；
- 函數(shù)組件的參數(shù)
commit 階段瀏覽器渲染
- React.Profiler 的使用
<React.Profiler id='index' onRender={callback}>
<Compoent />
</React.Profiler>
let commitCounter = 0;
function callback(id, phase, actualTime,baseTime,startTime,commitTime,interactions) {
commitCounter ++;
console.log('countRender: ', countRender);
console.log(id,phase,actualTime,baseTime,startTime,commitTime,interactions);
}
使用 React.Profiler 可以知道每一次 commit 瀏覽器渲染的時間您旁；根據(jù) commitCounter 和 React devtool 可以查看具體的 commit 渲染的火焰圖：
批注1.png
根據(jù)火焰圖，可以知道每次 commit 每個組件的渲染耗時轴捎，以及什么原因?qū)е陆M件渲染
