react 常见的组件优化

ShouldComponentUpdate

渲染前会进行比较，如果返回的react元素和之前的想用就不需要render，可以看下面的例子
正常情况下：

import React, { Component } from "react";

export default class ShouldComponentUpdate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      comments: [],
    };
  }
  componentDidMount() {
    setInterval(() => {
      this.setState({
        comments: [
          {
            author: "小明",
            body: "这是小明写的文章",
          },
          {
            author: "小红",
            body: "这是小红写的文章",
          },
        ],
      });
    }, 1000);
  }
  render() {
    const { comments } = this.state;
    return (
      <div>
        <h1>CommentList</h1>
        {comments.map((item) => {
          return <Comment key={item.author} data={item} />;
        })}
      </div>
    );
  }
}

class Comment extends Component {
  render() {
    const { author, body } = this.props.data;
    console.log("render");
    return (
      <div className="border">
        <p>作者: {author}</p>
        <p>内容: {body}</p>
      </div>
    );
  }
}

可以看到一直在render

使用ShouldComponentUpdate后

import React, { Component } from "react";

export default class ShouldComponentUpdate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      comments: [],
    };
  }
  componentDidMount() {
    setInterval(() => {
      this.setState({
        comments: [
          {
            author: "小明",
            body: "这是小明写的文章",
          },
          {
            author: "小红",
            body: "这是小红写的文章",
          },
        ],
      });
    }, 1000);
  }
  render() {
    const { comments } = this.state;
    return (
      <div>
        <h1>CommentList</h1>
        {comments.map((item) => {
          return <Comment key={item.author} data={item} />;
        })}
      </div>
    );
  }
}

class Comment extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    const { author, body } = nextProps;
    const { author: nowAuthor, body: nowBody } = this.props;
    if (nowAuthor === author && nowBody === body) {
      // 减少reader
       return false;
    }
    return true;
  }
  render() {
    const { author, body } = this.props.data;
    console.log("render");
    return (
      <div className="border">
        <p>作者: {author}</p>
        <p>内容: {body}</p>
      </div>
    );
  }
}

可以看到只render了2次

PureComponent

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

export default class MemoPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
      obj: {
        num: -1,
      },
    };
  }

  setCounter = () => {
    this.setState({
      counter: 1,
    });
  };
  render() {
    const { counter, obj } = this.state;
    return (
      <div>
        <h1>PureComponentPage</h1>
        <button onClick={this.setCounter}>change</button>
        <Demo counter={counter} obj={obj} />
      </div>
    );
  }
}
 class Demo extends PureComponent {
   render() {
     const { counter } = this.props;
     console.log("render");
     return <div>{counter}</div>;
   }
 }

当点击多次的时候只会执行一次，Component 会执行多次

   const Demo = memo(props => {   const { counter } = props;
  console.log("render");
   return <div>{counter}</div>;
});

和PureComponent 一样的效果。
缺点

只会进行浅比较