React组件优化

shouldComponentUpdate 返回false就不会走render函数 但是值会更新

src/Pages/CommentListPage

import React, { Component } from 'react'

export default class CommentListPage extends Component {
    constructor(props){
        super(props);
        this.state = {
            commentList:[]
        }
    }
    componentDidMount() {
        this.timer = setInterval(()=>{
            this.setState({
                commentList: [
                    {
                        id: 0,
                        author: "⼩小明",
                        body: "这是⼩小明写的⽂文章", },
                        {
                        id: 1,
                        author: "⼩小红",
                        body: "这是⼩小红写的⽂文章", }
                ]
            })
            },1000);
    }
    componentWillUnmount(){
        clearInterval(this.timer);
    }
    render() {
        console.log('render');
        const {commentList} = this.state;
        return (
            <div>
                <h1>CommentListPage</h1>
                {
                    commentList.map(item =>{
                        return <Comment key={item.id} data={item}/>
                    })
                }
            </div>
        )
    }
}

class Comment extends Component{
    shouldComponentUpdate(nextProps,nextState){
        const {author,body} = this.props.data;
        const {author: newAuthor,body:newBody} = nextProps.data;
        if((author === newAuthor) && (body === newBody)){
            return false;
        }
        return true;
    }
    render(){
        console.log('Commentrender');
        const {author,body} = this.props.data;
        return (
            <div className="border">
            <p>{author}</p>
            <p>{body}</p>
        </div>
        );
    }
}

继承PureComponent

原理是在shouldComponentUpdate里面做state里面参数的浅比较 来返回true或false

import React, { Component,PureComponent } from 'react'

export default class PureComponentPage extends PureComponent {
    constructor(props){
        super(props);
        this.state = {
            counter: 0
        }
    };
    setCounter = () => {
        this.setState({
            counter: 100
        })
    }
    render() {
        console.log("render");
        
        const {counter} = this.state
        return (
            <div>
                <div onClick={this.setCounter}>{counter}</div>
            </div>
        )
    }
}

React.memo 高阶组件

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

export default class ReactMemoPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      counter: 0,
      obj: { num: 0 },
    };
  }
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({
        date: new Date(),
        //counter: this.state.counter + 1,
      });
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  render() {
    const { counter, date, obj } = this.state;
    console.log("render", counter);
    return (
      <div>
        <h1>ReactMemoPage</h1>
        <p>{date.toLocaleTimeString()}</p>
        <MemoCounter counter={counter} /* obj={obj} */ />
      </div>
    );
  }
}

const MemoCounter = memo(props => {
  console.log("MemoCounter");
  const [num, setNum] = useState(0);
  return (
    <div>
      {props.counter}
      <button onClick={() => setNum(num + 1)}>{num}</button>
    </div>
  );
});