1. 非必要組件渲染

在 React 工程中，在改變 React 狀態(tài)時，我們希望對整個頁面的影響越小越好。然而實(shí)際情況是更改掉某些屬性之后，除了會導(dǎo)致組件本身的重新渲染，也可能會導(dǎo)致其相關(guān)的組件也發(fā)生重新渲染。請看下面的例子：

• 新建一對父子組件

// 父組件：
import React, { Component } from 'react' 
import Child from './Child' 
class Parent extends Component { 
    constructor(props) { 
        super(props) 
        this.state = { 
            parentInfo: 'parent', 
            sonInfo: 'son' 
        } 
        this.changeParentInfo = this.changeParentInfo.bind(this) 
    } 
    
    changeParentInfo() { 
        this.setState({ parentInfo: `改變了父組件state：${Date.now()}` }) 
    } 
    
    render() { 
        console.log('Parent Component render') 
        return ( 
            <div> 
                <p>{this.state.parentInfo}</p> 
                <button onClick={this.changeParentInfo}>改變父組件state</button> <br/> 
                <Child son={this.state.sonInfo}></Child> 
            </div> 
        )
    } 
} 
export default Parent

// 子組件：
import React, {Component} from 'react' 
class Child extends Component { 
    constructor(props) { 
        super(props) 
        this.state = {} 
    } 

    render() { 
        console.log('Child Component render') 
        return ( 
            <div> 
                這里是child子組件： 
                <p>{this.props.son}</p>
            </div> 
        ) 
    } 
} 

export default Child

打開控制臺，我們可以觀察到，在點(diǎn)擊按鈕的時候控制臺會輸出 Parent Component render 和 Child Component render。這表明了子組件和父組件同時被重新渲染。

在這個例子中，點(diǎn)擊按鈕，僅僅改變了父組件相關(guān)的狀態(tài)，而子組件的狀態(tài)不變。因此，最理想的情況是只重新渲染父組件，而子組件則不會被重新渲染。

為了提高其性能，我們需要通過某種手段來抑制狀態(tài)未發(fā)生改變的組件的渲染。

2. 解決方案之 shouldComponentUpdate

shouldComponentUpdate 是 React 生命周期的一個環(huán)節(jié)，具體的執(zhí)行位置是 react 在發(fā)生更新之后，render 之前。該生命周期方法接收兩個參數(shù)，nextProps 和 nextState，返回一個 Boolean 值來決定該組件是否需要重新渲染。因此，在這個生命周期方法中，我們可以完成將下一個時刻的狀態(tài)和當(dāng)前的狀態(tài)進(jìn)行對比，并且決定是否重新渲染。這樣，就減少了非必要的渲染，達(dá)到了我們的目的。

3. 解決方案之 PureComponent

PureComponent 類是一個高階組件，主要是對于類組件的封裝。它實(shí)現(xiàn)了將之前的狀態(tài)和改變之后的狀態(tài)進(jìn)行淺比較的功能，通過比較的結(jié)果決定當(dāng)前組件是否需要重新渲染。

淺比較：首先比較兩個對象的 key 長度是否一致，然后檢測每一個 key 是否兩者都有，并且是否是一個引用。

使用方法和普通的組件差不多，只是在類組件創(chuàng)建的時候?qū)U(kuò)展的 Component 類變成 PureComponent 類即可：

import React, { PureComponent} from 'react'
export default class myComponent extends PureComponent {

     //...
 
    render() {
    // ...
    }
}

4. 解決方案之 React.memo

和 PureComponent 類似，React.memo 也是可以實(shí)現(xiàn)部分狀態(tài)未改變的組件不會重新渲染功能的高階組件。不同的是，它只適用于函數(shù)組件，而不適用于類組件。

在 Hooks 誕生之前，函數(shù)組件是沒有狀態(tài)的。因此，React.memo 僅僅會檢查 props 是否發(fā)生變更。如果函數(shù)組件的實(shí)現(xiàn)包括 useState 或者 useContext 這些 Hooks，狀態(tài)發(fā)生變化時，他也會重新渲染。

5. useMemo 和 useCallback

useMemo 和 useCallback 是對于函數(shù)組件輸出的特性的緩存。其中，useMemo 緩存的是回調(diào)函數(shù)中 return 回來的值，主要用于緩存結(jié)果得知，應(yīng)用場景如需計(jì)算的狀態(tài)；useCallback 緩存的結(jié)果是函數(shù)，主要用于緩存函數(shù)，應(yīng)用場景如需緩存的函數(shù)。因?yàn)楹瘮?shù)式組件每次 state 發(fā)生變化會觸發(fā)整個組件的更新，一些函數(shù)是沒有必要更新的，此時就應(yīng)該緩存起來，提高性能，減少對資源的浪費(fèi)。

這兩個 Hooks 通常會配套使用。

到此這篇關(guān)于React 性能優(yōu)化之非必要的渲染問題解決的文章就介紹到這了,更多相關(guān)React  非必要渲染內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論