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

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

苏南大叔:react性能优化,如何利用pure组件避免类组件的不必要渲染? - react传统类组件如何避免不必要渲染
react性能优化,如何利用pure组件避免类组件的不必要渲染?(图7-1)

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

前文回顾

本文基于下面这篇文章:

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

本文魔改

在本文中,对上述代码再次进行魔改。利用传统的类组件的代码,再次实现上述的函数式组件Child。一共是两个组件,分别是:基于PureComponentChild2,另外一个是基于ComponentChild3。如果要快速输入代码的话,分别是rccrce。参考文章:

父组件调用代码

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;

苏南大叔:react性能优化,如何利用pure组件避免类组件的不必要渲染? - child-data
react性能优化,如何利用pure组件避免类组件的不必要渲染?(图7-2)

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);

苏南大叔:react性能优化,如何利用pure组件避免类组件的不必要渲染? - memo子组件
react性能优化,如何利用pure组件避免类组件的不必要渲染?(图7-3)

基于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>
      </>
    )
  }
}

苏南大叔:react性能优化,如何利用pure组件避免类组件的不必要渲染? - purecomponent
react性能优化,如何利用pure组件避免类组件的不必要渲染?(图7-4)

基于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>
      </>
    )
  }
}

苏南大叔:react性能优化,如何利用pure组件避免类组件的不必要渲染? - component
react性能优化,如何利用pure组件避免类组件的不必要渲染?(图7-5)

代码效果

改变父组件的状态值1,父组件和普通的类组件Child2刷新。而memoChildPureComponentChild3都不刷新。

苏南大叔:react性能优化,如何利用pure组件避免类组件的不必要渲染? - 子组件全部渲染
react性能优化,如何利用pure组件避免类组件的不必要渲染?(图7-6)

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

苏南大叔:react性能优化,如何利用pure组件避免类组件的不必要渲染? - 子组件的component渲染
react性能优化,如何利用pure组件避免类组件的不必要渲染?(图7-7)

相关链接

综述

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react