对比之前的组件优化说明React.memo的作用

news2024/11/16 7:37:10

我们之前写的react PureComponent讲述了 PureComponent 组件优化特性的强大功能
还有就是 shouldComponentUpdate 生命周期的一个解决方案
那么呢今天我们要说另一个也是类似于组件性能优化的新特性

打开我们的react项目
在src下的components创建一个组件
例如我这里叫 dom.jsx
参考代码如下

import React from "react";

export default class record extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      cont: 0,
    }
  }
  
  componentDidMount = () => {
    this.myTarget = setInterval(()=>{
      this.setState({
        cont: 1
      });
    }, 1000);
  }

  render(){
    console.log("组件被重写渲染");
    return (
      <div className="App">
         { this.state.cont }
      </div>
    )
  }
}

然后在App根组件中引入这个组件
我们可以看到我们这个组件在componentDidMount生命周期中定义了一个定时器每秒将响应式数据cont赋一次值
但是既然都是1 那是不是 render 渲染一次就够啦？
因为值都是一样的
我们运行项目
在这里插入图片描述可以看到虽然我们赋值的都是 1 但是它相当于我们每次调用setState render就会重新挂一次界面

那么我们按之前学的解决方案就是将 React.Component 改成 React.PureComponent
这样就不会每次更改就算值相同都一直重新渲染界面了

还有一种办法就是将组件代码改成这样

import React from "react";

export default class record extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      cont: 0,
    }
  }

  shouldComponentUpdate = (props,state) => {
    return state.cont !== this.state.cont;
  }
  
  componentDidMount = () => {
    this.myTarget = setInterval(()=>{
      this.setState({
        cont: 1
      });
    }, 1000);
  }

  render(){
    console.log("组件被重写渲染");
    return (
      <div className="App">
         { this.state.cont }
      </div>
    )
  }
}

我们知道修改组件响应式数据会触发的生命周期是 shouldComponentUpdate componentWillUpdate render componentDidUpdate
而其中 shouldComponentUpdate 中可以返回一个值类型为 true/false 一点返回false 在shouldComponentUpdate后执行的生命周期都不会执行
shouldComponentUpdate 接收两个行参第一个是父组件传过来的值第二个是本组件的state
需要注意的是 shouldComponentUpdate接回来的这个state中的值是更改之前的
那么我们就完全可以用shouldComponentUpdate接到的state和组件this中的state去做比较判断这次有没有改变
这样我们就相当于写了个条件如果 state 和 this.state中的cont不一样那就是true 允许后面的生命周期执行否则直接返回false 后面的生命周期就不会执行包括render

我们在components创建一个dom1.jsx
参考代码如下

import React from "react"
const Dom = () => {
    console.log("Dom1组件被重新渲染");
    return (
      <div>
        子组件
      </div>
    );
  };
export default Dom;

然后我们将dom.jsx代码更改如下

import React from "react";
import Dom1 from "./dom1";

export default class record extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      cont: 0,
    }
  }

  shouldComponentUpdate = (props,state) => {
    return state.cont !== this.state.cont;
  }
  
  componentDidMount = () => {
    this.myTarget = setInterval(()=>{
      this.setState({
        cont: this.state.cont+1
      });
    }, 1000);
  }

  render(){
    return (
      <div className="App">
         { this.state.cont }
         <Dom1/>
      </div>
    )
  }
}