React组件中三种性能优化方法(shouldComponentUpdate,PureComponent,memo)

1.方法PureComponent,memo

父组件每次更新，甚至是setState空对象，不论是否更改子组件的属性，都会使子组件走一遍更新（创建新的DOM节点，对比老的DOM节点，无变化则不变，否则更新），PureComponent(用于class组件)，memo(用于function组件)能优化，减少无效更新

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

export default class App extends Component {
  state={
    name:"jack",
    title:"ab"
  }
  render() {
    return (
      <div>
        {this.state.name}
        <button
          onClick={() => {
            this.setState({ name: "xiaoming" });
          }}
        >
          点击换名
        </button>
        <button
        //使用memo后子组件自己更新时才会渲染
          onClick={() => {
            this.setState({title: "angelbaby" });
          }}
        >
          点击切换子组件名
        </button>
        <div>
          <Child title={this.state.title}/>
        </div>
      </div>
    );
  }
}
// function Child(){
    console.log("Child重新渲染了");
//   return <div>Child</div>;
// }
//相当于把之前的普通函数组件当做参数传给memo，memo生成了更强大组件
const Child =memo((props)=>{
  return(
    <div>Child-{props.title}{console.log('Child重新渲染了')}</div>
  )
})

2.方法shouldComponentUpdate

或者通过生命周期的shouldComponentUpdate函数，判断之前状态与新状态，前属性与新属性，如果一样则return false,不一样return true使它更新

  //在render函数调用前判断：如果前后state中Number不变，通过return false阻止render调用
  shouldComponentUpdate(nextProps,nextState){
      if(nextState.Number == this.state.Number){
        return false
      }
  }