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

Posted on by

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  非必要渲染內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：