react性能优化，如何利用pure组件避免类组件的不必要渲染？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

react项目，目前推荐使用的是函数式组件，对于解决“组件的不必要渲染”问题，使用的是memo方案。但是对于传统的类组件的写法，又是如何解决“组件的不必要渲染”问题呢？这就是本文中所谈论的问题，同时也可以得出有关Component和PureComponent的区别的结论。

大家好，这里是苏南大叔的平行空间笔记本博客，这里记录苏南大叔和计算机代码的故事。本文描述的是react传统的类组件，如何避免组件的不必要渲染问题。实际上就是说，如果组件涉及的state和props都没有发生变化的话，就不应该对其进行渲染。测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2，win10，vscode@1.72.2，ES7+ React/Redux/React-Native snippets@4.4.3。

前文回顾

本文基于下面这篇文章：

• https://seosn.com/say/react-memo.html

在这篇文章中，首先禁用了strict.mode，然后父组件App把自身的state通过props传递给子组件Child。一共有两个state，一个和子组件有关，另外一个和子组件无关。通过memo来避免子组件的不必要渲染。两个状态值都是普通的类型，不是object类型，参考文章：

• https://seosn.com/say/react-issue-state-object.html

本文魔改

在本文中，对上述代码再次进行魔改。利用传统的类组件的代码，再次实现上述的函数式组件Child。一共是两个组件，分别是：基于PureComponent的Child2，另外一个是基于Component的Child3。如果要快速输入代码的话，分别是rcc和rce。参考文章：

• https://seosn.com/say/vscode-snippet-react.html

父组件调用代码

import './App.css';
import React, { useState } from 'react';
import Child from './Child';
import Child2 from './Child2';
import Child3 from './Child3';

function App() {
  const [data1, set_data1] = useState(0)
  const [data2, set_data2] = useState("sunan")
  return (
    <>
      <div className="App">
        <table>
          <tbody>
            <tr>
              <td>
                <button onClick={() => set_data1((val) => val + 1)}>    父组件修改仅自身使用的变量data1</button>
              </td>
              <td>{data1}</td>
            </tr>
            <tr>
              <td>
                <button onClick={() => set_data2((val) => val + data1)}>父组件修改传入子组件的变量data2</button>
              </td>
              <td>{data2}</td>
            </tr>
          </tbody>
        </table>
        <Child  data={data2}></Child>
        <Child2 data={data2}></Child2>
        <Child3 data={data2}></Child3>
      </div>
    </>
  );
}
export default App;

带Memo的函数式组件Child

import React,{memo} from 'react';
const Child = (props) => {
  const { data } = props
  return (
    <>
      <table>
        <tbody>
        <tr>
          <td>memo子组件Data</td>
          <td>{data}</td>
        </tr>
        <tr>
          <td>渲染时间</td>
          <td>{Date.now()}</td>
        </tr>
        </tbody>
      </table>
    </>
  )
}
export default memo(Child);

基于PureComponent的纯类组件Child2

纯类组件Child2，代码如下：

import React, { PureComponent } from 'react'
export default class Child2 extends PureComponent {
  render() {
    const { data } = this.props
    return (
      <>
        <table>
          <tbody>
            <tr>
              <td>PureComponent组件Data</td>
              <td>{data}</td>
            </tr>
            <tr>
              <td>渲染时间</td>
              <td>{Date.now()}</td>
            </tr>
          </tbody>
        </table>
      </>
    )
  }
}

基于Component的纯类组件Child3

普通类组件Child3，代码如下：

import React, { Component } from 'react'
export default class Child3 extends Component {
  render() {
    return (
      <>
        <table>
          <tbody>
            <tr>
              <td>Component组件Data</td>
              <td>{this.props.data}</td>
            </tr>
            <tr>
              <td>渲染时间</td>
              <td>{Date.now()}</td>
            </tr>
          </tbody>
        </table>
      </>
    )
  }
}

代码效果

改变父组件的状态值1，父组件和普通的类组件Child2刷新。而memo的Child和PureComponent的Child3都不刷新。

修改父组件的状态值2，父组件和所有组件都刷新。

相关链接

• https://seosn.com/say/react-memo.html
• https://seosn.com/say/react-issue-state-object.html
• https://seosn.com/say/vscode-snippet-react.html

综述

这个文章还有个额外的结论：函数式组件和类式组件，是可以在一个react项目里面混用的。更多react经验文章，请点击：

• https://seosn.com/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。