不挂载 组件渲染_让你的 React 组件性能跑得再快一点「实践」
作者：天澤
轉(zhuǎn)發(fā)鏈接：https://www.zoo.team/article/react-render
性能和渲染(Render)正相關(guān)
React 基于虛擬 DOM 和高效 Diff 算法的完美配合，實(shí)現(xiàn)了對 DOM 最小粒度的更新。大多數(shù)情況下，React 對 DOM 的渲染效率足以我們的業(yè)務(wù)日常。但在個(gè)別復(fù)雜業(yè)務(wù)場景下，性能問題依然會困擾我們。此時(shí)需要采取一些措施來提升運(yùn)行性能，其很重要的一個(gè)方向，就是避免不必要的渲染(Render)。
渲染(Render)時(shí)影響性能的點(diǎn)
React 處理 render 的基本思維模式是每次一有變動就會去重新渲染整個(gè)應(yīng)用。在 Virtual DOM 沒有出現(xiàn)之前，最簡單的方法就是直接調(diào)用 innerHTML。Virtual DOM 厲害的地方并不是說它比直接操作 DOM 快，而是說不管數(shù)據(jù)怎么變，都會盡量以最小的代價(jià)去更新 DOM。React 將 render 函數(shù)返回的虛擬 DOM 樹與老的進(jìn)行比較，從而確定 DOM 要不要更新、怎么更新。當(dāng) DOM 樹很大時(shí)，遍歷兩棵樹進(jìn)行各種比對還是相當(dāng)耗性能的，特別是在頂層 setState 一個(gè)微小的修改，默認(rèn)會去遍歷整棵樹。盡管 React 使用高度優(yōu)化的 Diff 算法 ，但是這個(gè)過程仍然會損耗性能。
渲染(Render)何時(shí)會被觸發(fā)
○ 組件掛載
React 組件構(gòu)建并將 DOM 元素插入頁面的過程稱為掛載。當(dāng)組件首次渲染的時(shí)候會調(diào)用 render，這個(gè)過程不可避免。
○ setState() 方法被調(diào)用
setState 是 React 中最常用的命令，通常情況下，執(zhí)行 setState 會觸發(fā) render。但是這里有個(gè)點(diǎn)值得關(guān)注，執(zhí)行 setState 的時(shí)候一定會重新渲染嗎？答案是不一定。當(dāng) setState 傳入 null 的時(shí)候，并不會觸發(fā) render ，可以運(yùn)行下面的 Demo 來佐證：
class App extends React.Component { state = { a: 1 }; render() { console.log("render"); return ({this.state.a}
{ this.setState({ a: 1 }); // 這里并沒有改變 a 的值 }} > Click me this.setState(null)}>setState null ); }}○ 父組件重新渲染
只要父組件重新渲染了，即使傳入子組件的 props 未發(fā)生變化，那么子組件也會重新渲染，進(jìn)而觸發(fā) render。
我們對上面的 demo 進(jìn)行稍微的修改，可以看出當(dāng)點(diǎn)擊按鈕的時(shí)候，Child 組件的 props 并沒有發(fā)生變化，但是也觸發(fā)了 render 方法：
const Child = () => { console.log("child render"); return child;};class App extends React.Component { state = { a: 1 }; render() { console.log("render"); return ({this.state.a}
{ this.setState({ a: 1 }); }} > Click me this.setState(null)}>setState null ); }}優(yōu)化 Render 我們能做什么？
上文描述的 React 組件渲染機(jī)制其實(shí)是一種較好的做法，很好地避免了在每一次狀態(tài)更新之后，需要去手動執(zhí)行重新渲染的相關(guān)操作。魚和熊掌不可兼得，帶來方便的同時(shí)也會存在一些問題，當(dāng)子組件過多或者組件的層級嵌套過深時(shí)，因?yàn)榉捶磸?fù)復(fù)重新渲染狀態(tài)沒有改變的組件，可能會增加渲染時(shí)間又會影響用戶體驗(yàn)，此時(shí)就需要對 React 的 render 進(jìn)行優(yōu)化。
上面說了不必要的 render 會帶來性能問題，因此我們的主要優(yōu)化思路就是減少不必要的 render。
○ shouldComponentUpdate 和 PureComponent
在 React 類組件中，可以利用 shouldComponentUpdate 或者 PureComponent來減少因父組件更新而觸發(fā)子組件的 render，從而達(dá)到目的。shouldComponentUpdate 來決定是否組件是否重新渲染，如果不希望組件重新渲染，返回 false 即可。
在 React 中 PureComponet 的源碼為
if (this._compositeType === CompositeTypes.PureClass) { shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);}看函數(shù)名就能夠理解，PureComponet 通過對 props 和 state 的淺比較結(jié)果來實(shí)現(xiàn) shouldComponentUpdate，當(dāng)對象包含復(fù)雜的數(shù)據(jù)結(jié)構(gòu)時(shí)，可能就不靈了，對象深層的數(shù)據(jù)已改變卻沒有觸發(fā) render。
看到這里，順便看一下 shallowEqual 是如何實(shí)現(xiàn)的。
const hasOwnProperty = Object.prototype.hasOwnProperty;/** * is 方法來判斷兩個(gè)值是否是相等的值，為何這么寫可以移步 MDN 的文檔 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is */function is(x: mixed, y: mixed): boolean { if (x === y) { return x !== 0 || y !== 0 || 1 / x === 1 / y; } else { return x !== x && y !== y; }}function shallowEqual(objA: mixed, objB: mixed): boolean { // 首先對基本類型進(jìn)行比較 if (is(objA, objB)) { return true; } if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) { return false; } const keysA = Object.keys(objA); const keysB = Object.keys(objB); // 長度不相等直接返回false if (keysA.length !== keysB.length) { return false; } // key相等的情況下，再去循環(huán)比較 for (let i = 0; i < keysA.length; i++) { if ( !hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]]) ) { return false; } } return true;}○ 利用高階組件
在函數(shù)組件中，并沒有 shouldComponentUpdate 這個(gè)生命周期，可以利用高階組件，封裝一個(gè)類似 PureComponet 的功能
const shouldComponentUpdate = arePropsEqual => BaseComponent => { class ShouldComponentUpdate extends React.Component { shouldComponentUpdate(nextProps) { return arePropsEqual(this.props, nextProps) } render() { return } } ShouldComponentUpdate.displayName = `Pure(${BaseComponent.displayName})`; return ShouldComponentUpdate;}const Pure = BaseComponent => { const hoc = shouldComponentUpdate( (props, nextProps) => !shallowEqual(props, nextProps) ) return hoc(BaseComponent);}使用 Pure 高階組件的時(shí)候，只需要對我們的子組件進(jìn)行裝飾即可。
import React from 'react';const Child = (props) => {props.name};export default Pure(Child);○ 使用 React.memo
React.memo 是 React 16.6 新的一個(gè) API，用來緩存組件的渲染，避免不必要的更新，其實(shí)也是一個(gè)高階組件，與 PureComponent 十分類似，但不同的是，React.memo 只能用于函數(shù)組件 。
基本用法
import { memo } from 'react';function Button(props) { // Component code}export default memo(Button);高級用法
默認(rèn)情況下其只會對 props 做淺層對比，遇到層級比較深的復(fù)雜對象時(shí)，表示力不從心了。對于特定的業(yè)務(wù)場景，可能需要類似 shouldComponentUpdate 這樣的 API，這時(shí)通過 memo 的第二個(gè)參數(shù)來實(shí)現(xiàn)：
function arePropsEqual(prevProps, nextProps) { // your code return prevProps === nextProps;}export default memo(Button, arePropsEqual);“
注意：與 shouldComponentUpdate 不同的是，arePropsEqual 返回 true 時(shí)，不會觸發(fā) render，如果返回 false，則會。而 shouldComponentUpdate 剛好與其相反。
○ 合理拆分組件
微服務(wù)的核心思想是：以更輕、更小的粒度來縱向拆分應(yīng)用，各個(gè)小應(yīng)用能夠獨(dú)立選擇技術(shù)、發(fā)展、部署。我們在開發(fā)組件的過程中也能用到類似的思想。試想當(dāng)一個(gè)整個(gè)頁面只有一個(gè)組件時(shí)，無論哪處改動都會觸發(fā)整個(gè)頁面的重新渲染。在對組件進(jìn)行拆分之后，render 的粒度更加精細(xì)，性能也能得到一定的提升。
總結(jié)
本文主要介紹了如何減少不必要的 render 來提升 React 的性能。在實(shí)際開發(fā)過程中，前端性能問題可能并不常見，隨著業(yè)務(wù)的復(fù)雜度增加，遇到性能問題的概率也會隨之增加。
- 減少 render 的次數(shù) 類組件可以使用 shouldComponentUpdate 或 PureComponent，函數(shù)組件可以利用高級組件的特性或者 React.memo
- 對組件進(jìn)行合理的拆分
在摸索這些解決方案的同時(shí)，我們能夠?qū)W習(xí)到諸多經(jīng)典的編程思想，從而更加合理的運(yùn)用框架、技術(shù)解決業(yè)務(wù)問題。
推薦React 學(xué)習(xí)相關(guān)文章
《React源碼分析與實(shí)現(xiàn)(三)：實(shí)踐 DOM Diff》
《React源碼分析與實(shí)現(xiàn)(一)：組件的初始化與渲染「實(shí)踐篇」》
《React源碼分析與實(shí)現(xiàn)(二)：狀態(tài)、屬性更新->setState「實(shí)踐篇」》
《細(xì)說React 核心設(shè)計(jì)中的閃光點(diǎn)》
《手把手教你10個(gè)案例理解React hooks的渲染邏輯「實(shí)踐」》
《React-Redux 100行代碼簡易版探究原理》
《手把手深入教你5個(gè)技巧編寫更好的React代碼【實(shí)踐】》
《React 函數(shù)式組件性能優(yōu)化知識點(diǎn)指南匯總》
《13個(gè)精選的React JS框架》
《深入淺出畫圖講解React Diff原理【實(shí)踐】》
《【React深入】React事件機(jī)制》
《Vue 3.0 Beta 和React 開發(fā)者分別杠上了》
《手把手深入Redux react-redux中間件設(shè)計(jì)及原理(上)【實(shí)踐】》
《手把手深入Redux react-redux中間件設(shè)計(jì)及原理(下)【實(shí)踐】》
《前端框架用vue還是react？清晰對比兩者差異》
《為了學(xué)好 React Hooks, 我解析了 Vue Composition API》
《【React 高級進(jìn)階】探索 store 設(shè)計(jì)、從零實(shí)現(xiàn) react-redux》
《寫React Hooks前必讀》
《深入淺出掌握React 與 React Native這兩個(gè)框架》
《可靠React組件設(shè)計(jì)的7個(gè)準(zhǔn)則之SRP》
《React Router v6 新特性及遷移指南》
《用React Hooks做一個(gè)搜索欄》
《你需要的 React + TypeScript 50 條規(guī)范和經(jīng)驗(yàn)》
《手把手教你繞開React useEffect的陷阱》
《淺析 React / Vue 跨端渲染原理與實(shí)現(xiàn)》
《React 開發(fā)必須知道的 34 個(gè)技巧【近1W字】》
《三張圖詳細(xì)解說React組件的生命周期》
《手把手教你深入淺出實(shí)現(xiàn)Vue3 & React Hooks新UI Modal彈窗》
《手把手教你搭建一個(gè)React TS 項(xiàng)目模板》
《全平臺(Vue/React/微信小程序)任意角度旋圖片裁剪組件》
《40行代碼把Vue3的響應(yīng)式集成進(jìn)React做狀態(tài)管理》
《手把手教你深入淺出React 迷惑的問題點(diǎn)【完整版】》
作者：天澤
轉(zhuǎn)發(fā)鏈接：https://www.zoo.team/article/react-render
總結(jié)
以上是生活随笔為你收集整理的不挂载 组件渲染_让你的 React 组件性能跑得再快一点「实践」的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： svm训练完保存权重_assignmen
- 下一篇： Docker 使用