React 效能優化之非必要的渲染問題解決

2022-07-10 14:02:24

1. 非必要元件渲染

在 React 工程中，在改變 React 狀態時，我們希望對整個頁面的影響越小越好。然而實際情況是更改掉某些屬性之後，除了會導致元件本身的重新渲染，也可能會導致其相關的元件也發生重新渲染。請看下面的例子：

新建一對父子元件

// 父元件：
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

開啟控制檯，我們可以觀察到，在點選按鈕的時候控制檯會輸出 Parent Component render 和 Child Component render。這表明了子元件和父元件同時被重新渲染。

在這個例子中，點選按鈕，僅僅改變了父元件相關的狀態，而子元件的狀態不變。因此，最理想的情況是隻重新渲染父元件，而子元件則不會被重新渲染。

為了提高其效能，我們需要通過某種手段來抑制狀態未發生改變的元件的渲染。

2. 解決方案之 shouldComponentUpdate

shouldComponentUpdate 是 React 生命週期的一個環節，具體的執行位置是 react 在發生更新之後，render 之前。該生命週期方法接收兩個引數，nextProps 和 nextState，返回一個 Boolean 值來決定該元件是否需要重新渲染。因此，在這個生命週期方法中，我們可以完成將下一個時刻的狀態和當前的狀態進行對比，並且決定是否重新渲染。這樣，就減少了非必要的渲染，達到了我們的目的。

3. 解決方案之 PureComponent

PureComponent 類是一個高階元件，主要是對於類元件的封裝。它實現了將之前的狀態和改變之後的狀態進行淺比較的功能，通過比較的結果決定當前元件是否需要重新渲染。

淺比較：首先比較兩個物件的 key 長度是否一致，然後檢測每一個 key 是否兩者都有，並且是否是一個參照。

使用方法和普通的元件差不多，只是在類元件建立的時候將擴充套件的 Component 類變成 PureComponent 類即可：

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

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

4. 解決方案之 React.memo

和 PureComponent 類似，React.memo 也是可以實現部分狀態未改變的元件不會重新渲染功能的高階元件。不同的是，它只適用於函陣列件，而不適用於類元件。

在 Hooks 誕生之前，函陣列件是沒有狀態的。因此，React.memo 僅僅會檢查 props 是否發生變更。如果函陣列件的實現包括 useState 或者 useContext 這些 Hooks，狀態發生變化時，他也會重新渲染。

5. `useMemo` 和 `useCallback`

useMemo 和 useCallback 是對於函陣列件輸出的特性的快取。其中，useMemo 快取的是回撥函數中 return 回來的值，主要用於快取結果得知，應用場景如需計算的狀態；useCallback 快取的結果是函數，主要用於快取函數，應用場景如需快取的函數。因為函數式元件每次 state 發生變化會觸發整個元件的更新，一些函數是沒有必要更新的，此時就應該快取起來，提高效能，減少對資源的浪費。

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

到此這篇關於React 效能優化之非必要的渲染問題解決的文章就介紹到這了,更多相關React 非必要渲染內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！