React中_函数(memo)和class(PureCompon

memo 只能是函数组件可以使用的,类组件(class)是用不了的

所有的函数组件都是可以包裹一个memo函数的 这个函数就像类组件的PureComponent的效果是一样的

memo 阻止多次调用的问题

import React, { memo, PureComponent } from "react";


// 所有的函数组件都是可以包裹一个memo函数的 这个函数就像类组件的PureComponent的效果是一样的
const MemoHeader = memo(function Header() {
  console.log("Header render被调用了");
  return (
    <div>
      <h1>Header</h1>
    </div>
  );
});

class Main extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }
  render() {
    console.log("Main render被调用了");
    return (
      <div>
        <h1>Main</h1>
      </div>
    );
  }
}

export default class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }
  render() {
    console.log("App render被调用了");
    const { counter } = this.state;
    return (
      <div>
        <h1>当前计数:{counter}</h1>
        <button onClick={() => this.addClick()}> + 1</button>

        <MemoHeader />
        <Main />
      </div>
    );
  }

  addClick() {
    this.setState({
      counter: this.state.counter + 1,
    });
  }
}

PureComponent是专门针对 类组件的,memo是专门针对函数组件的,这两个的作用:主要是防止多次渲染