写出更优雅的react组件（避免重复渲染）

忘是亡心i 2023-01-16 09:44 134阅读 0赞

### 写出更优雅的react组件 ###

*  一、存在问题
 *  二、解决办法
 *   *   *  类组件的解决方法
         *   *  1、 shouldComponentUpdate（React 类组件的一个生命周期）
             *  2、PureComponent + Immutable.js（进阶版）
             *   *  （1）为什么有了PureComponent这个方法
                 *  （2）PureComponent 与 Component 的区别点
                 *  （3）PureComponent用法
                 *  （4）Immutable.js
         *  函数组件的解决方法
         *   *  1、React.memo：“函数版”shouldComponentUpdate/PureComponent
             *   *  （1）调用姿势
                 *  （2）举例使用过程
                 *  （3）React.memo 和shouldComponentUpdate 的不同点
             *  2、useMemo：更加“精细”的 memo
             *   *  （1） React.memo()和 React.useMemo()的区别
                 *  （2）调用姿势

# 一、存在问题 #

一个父组件下面有几个子组件，更改其中一个子组件的数据，其它所有子组件都会重新渲染。  
举例：比如说一个父组件（Parent.js）下面有两个子组件(ChildA.js、ChildB.js)。代码如下  
（1）、ChildA.js文件：

import React from "react";
    export default class ChildA extends React.Component { 
      render() { 
        console.log("ChildA 的render方法执行了");
        return (
          <div className="childA">
            子组件A的内容：
            { this.props.text}
          </div>
        );
      }
    }

（2）、ChildB.js文件：

import React from "react";
    export default class ChildB extends React.Component { 
      render() { 
        console.log("ChildB 的render方法执行了");
        return (
          <div className="childB">
            子组件B的内容：
            { this.props.text}
          </div>
        );
      }
    }

(3)、 Parent.js文件：在共同的父组件 Parent.js 中，会将 ChildA 和 ChildB 组合起来，并分别向其中注入数据

import React from "react";
    import ChildA from './ChildA'
    import ChildB from './ChildB'
    class Parent extends React.Component { 
      state = { 
        textA: '我是A的文本',
        textB: '我是B的文本'
      }
      changeA = () => { 
        this.setState({ 
          textA: 'A的文本被修改了'
        })
      }
      changeB = () => { 
        this.setState({ 
          textB: 'B的文本被修改了'
        })
      }
      render() { 
        return (
        <div className="App">
          <div className="container">
            <button onClick={ this.changeA}>点击修改A处的文本</button>
            <button onClick={ this.changeB}>点击修改B处的文本</button>
            <ul>
              <li>
                <ChildA text={ this.state.textA}/>
              </li>
            <li>
              <ChildB text={ this.state.textB}/>
            </li>
            </ul>
          </div>
        </div>
      );
      }
    }
    export default Parent;

现在点击修改A处的文本，A组件的文本修改了，但是B组件也重新渲染了一遍。

**原因就是在 React 中，只要父组件发生了更新，那么所有的子组件都会被无条件更新**。这就导致了 ChildB 的 props 尽管没有发生任何变化，它本身也没有任何需要被更新的点，却还是会走一遍更新流程。

> 同样的情况也适用于组件自身的更新：当组件自身调用了 setState 后，那么不管 setState 前后的状态内容是否真正发生了变化，它都会去走一遍更新流程。

# 二、解决办法 #

### 类组件的解决方法 ###

#### 1、 shouldComponentUpdate（React 类组件的一个生命周期） ####

调用形式如下：

shouldComponentUpdate(nextProps, nextState)

React 组件会根据 shouldComponentUpdate 的返回值，来决定是否执行该方法之后的生命周期，进而决定是否对组件进行 re-render（重渲染），它的默认返回值是true,代表要更新，默认会重渲染一遍。  
然后我们在开发的时候可以通过手动往 shouldComponentUpdate 中填充判定逻辑，来实现是否要重新渲染。  
手动添加的代码如下：

shouldComponentUpdate(nextProps, nextState) { 
    
      // 判断 text 属性在父组件更新前后有没有发生变化，若没有发生变化，则返回 false
    
      if(nextProps.text === this.props.text) { 
    
        return false
    
      }
    
      // 只有在 text 属性值确实发生变化时，才允许更新进行下去
    
      return true
    
    }

然后我们就可以为 ChildB 加上这样一段 shouldComponentUpdate 逻辑，就可以防止ChildB.js重新渲染。

#### 2、PureComponent + Immutable.js（进阶版） ####

##### （1）为什么有了PureComponent这个方法 #####

因为shouldComponentUpdate这个方法每次都需要在不需要re-render的组件里面手动写一遍，就显得比较冗余和麻烦。然后React 15.3就提供了PureComponent这样一个类，

##### （2）PureComponent 与 Component 的区别点 #####

PureComponent它内置了对 shouldComponentUpdate 的实现：PureComponent 将会在 shouldComponentUpdate 中对组件更新前后的 props 和 state 进行浅比较，并根据浅比较的结果，决定是否需要继续更新流程。（“浅比较”将针对值类型数据对比其值是否相等，而针对数组、对象等引用类型的数据则对比其引用是否相等。）

##### （3）PureComponent用法 #####

例如把上面子组件ChildB.js的内容改成下面这样，只需要把

extends React.Component改成extends React.PureComponent
    import React from "react";
    export default class ChildB extends React.PureComponent { 
      render() { 
        console.log("ChildB 的render方法执行了");
        return (
          <div className="childB">
            子组件B的内容：
            { this.props.text}
          </div>
        );
      }
    }

##### （4）Immutable.js #####

因为PureComponent只能进行一个浅比较，它只能针对值类型数据对比其值是否相等，而针对数组、对象等引用类型的数据对比时只会对比它的引用。这样的话比较的时候就不会太准确。  
只用pureComponent存在的风险如下

*  数据内容没变，引用变了，浅比较仍然会认为“数据发生了变化”，进而触发一次不必要的更新，导致过度渲染；
 *  数据内容，引用没变，浅比较则会认为“数据没有发生变化”，进而阻断一次更新，导致不渲染。  
    immutable使用方法：

// 引入 immutable 库里的 Map 对象，它用于创建对象
    import {  Map } from 'immutable'
    // 初始化一个对象 baseMap
    const baseMap = Map({ 
      name: 'nicole',
      career: '前端',
      age: 23
    })
    // 使用 immutable 暴露的 Api 来修改 baseMap 的内容
    const changedMap = baseMap.set({ 
      age: 18
    })
    /* changedMap={ name: 'nicole', career: '前端', age: 18 } */
    // 我们会发现修改 baseMap 后将会返回一个新的对象，这个对象的引用和 baseMap 是不同的
    console.log('baseMap === changedMap', baseMap === changedMap) //false

上面修改引用类型数据的方法可以达成的效果是：只要发生改动，引用指向也会发生变化，从而让PureComponent可以监测到数据发生了变化

### 函数组件的解决方法 ###

#### 1、React.memo：“函数版”shouldComponentUpdate/PureComponent ####

React.memo 是 React 导出的一个顶层函数，它本质上是一个高阶组件，负责对函数组件进行包装。  
待补充：防止函数组件的重渲染：React.memo 与 useMemo

##### （1）调用姿势 #####

*  React.memo 接收两个参数，第一个参数是我们需要渲染的目标组件，第二个参数 areEqual 则用来进行 props 的对比逻辑 —— 这两个参数都传的时候就跟类组件的shouldComponentUpdate和PureComponent + Immutable.js实现的效果一样（进行深比较）
 *  areEqual 函数是一个可选参数，当不传入 areEqual 时，React.memo 也可以工作 ——此时就跟类组件的PureComponent实现的效果一样（React.memo 会自动为你的组件执行 props 的浅比较逻辑。）

import React from "react";
    
    // 定义一个函数组件
    function FunctionDemo(props) { 
      return xxx
    }
    // areEqual 函数是 memo 的第二个入参，我们之前放在 shouldComponentUpdate 里面的逻辑就可以转移至此处
    function areEqual(prevProps, nextProps) { 
    
    }
    // 使用 React.memo 来包装函数组件
    export default React.memo(FunctionDemo, areEqual);

React.memo 会帮我们“记住”函数组件的渲染结果，在组件前后两次 props 对比结果一致的情况下，它会直接复用最近一次渲染的结果。

##### （2）举例使用过程 #####

例如把前面的的类组件ChildB.js改造成下面这样

import React from "react";
    // 将 ChildB 改写为 function 组件
    function ChildB(props) { 
      console.log("ChildB 的render 逻辑执行了");
      return (
        <div className="childB">
          子组件B的内容：
          { props.text}
        </div>
      );
    }
    // areEqual 用于对比 props 的变化
    function areEqual(prevProps, nextProps) { 
      if(prevProps.text === nextProps.text) { 
        return true
      }
      return false
    }
    // 使用 React.memo 来包装 ChildB
    export default React.memo(ChildB, areEqual);

##### （3）React.memo 和shouldComponentUpdate 的不同点 #####

React.memo 只负责对比 props，而不会去感知组件内部状态（state）的变化。

#### 2、useMemo：更加“精细”的 memo ####

##### （1） React.memo()和 React.useMemo()的区别 #####

*  React.memo()——是对组件级别的重新渲染进行管控
 *  React.useMemo()——是对组件的某个或者几个部分的重渲染进行管控（）  
    React.memo 控制是否需要重渲染一个组件，而 useMemo 控制的则是是否需要重复执行某一段逻辑。

##### （2）调用姿势 #####

const computeValue = () => { 
        //目标逻辑
     }
     const memoizedValue = useMemo(computeValue, [a, b]);

目标逻辑作为第一个参数传入，把逻辑的依赖项数组作为第二个参数传入。这样只有当依赖项数组中的某个依赖发生变化时，useMemo 才会重新执行第一个参数中的目标逻辑。