1. 非必要組件渲染

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

• 新建一對(duì)父子組件

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

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

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

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

2. 解決方案之 shouldComponentUpdate

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

3. 解決方案之 PureComponent

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

淺比較：首先比較兩個(gè)對(duì)象的 key 長(zhǎng)度是否一致，然后檢測(cè)每一個(gè) key 是否兩者都有，并且是否是一個(gè)引用。

使用方法和普通的組件差不多，只是在類組件創(chuàng)建的時(shí)候?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)未改變的組件不會(huì)重新渲染功能的高階組件。不同的是，它只適用于函數(shù)組件，而不適用于類組件。

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

5. useMemo 和 useCallback

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

這兩個(gè) Hooks 通常會(huì)配套使用。