React 父組件重新渲染，子組件不需要渲染的三種性能優化方式(PureComponent,memo,shouldComponentUpdate);

//使用React普通函數時，可以使用兩種優化方式，PureComponent和shouldComponentUpdate

//shouldComponentUpdate

//shouldComponentUpdate
class Foo extends Component {
  shouldComponentUpdate(nextProps,nextState){
    if(nextProps.count===this.props.count){ //傳入的count與組件當前props的count比較,count沒改變，return false，不渲染
      return false    //不渲染
    }
    return true;  //渲染
  }
  render() {
    console.log("組件渲染");  //可以看到，當父組件的name改變時，子組件不會打印，只有count改變，才會打印，優化性能
    return null
  }
}

class App extends Component {
  state = {
    count: 0,
    name: 0
  }
  render() {
    return (
      <Fragment>
        <Foo count={this.state.count} ></Foo>
        <button onClick={() => { this.setState(() => ({ count:this.state.count+1 })) }}>加count</button>
        <button onClick={() => { this.setState(() => ({ name: this.state.count+1 })) }}>加name</button>
      </Fragment>

    )
  }
}

　　

//PureComponent

//引入PureComponent
import React, { Component, Fragment, PureComponent} from 'react';
//PureComponent，自動比較組件數據是否改變，注意只能比較一層，比如一個對象，對象中的屬性改變，他不會重新渲染，只有對象改變，才重新渲染。
class Foo extends PureComponent {
  render() {
    console.log("組件渲染");
    return null
  }
}

class App extends Component {
  state = {
    count: 0,
    name: 0
  }
  render() {
    return (
      <Fragment>
        <Foo count={this.state.count} ></Foo>
        <button onClick={() => { this.setState(() => ({ count:this.state.count+1 })) }}>加count</button>
        <button onClick={() => { this.setState(() => ({ name: this.state.count+1 })) }}>加name</button>
      </Fragment>

    )
  }
}

　　

//hooks 獨有優化方式memo

//引入memo
import React, { Component, Fragment,  memo } from 'react';
//用memo把hooks包裹即可
const Foo = memo(function Foo(props) {
  console.log("組件渲染");
  return <div>count:{props.count}</div>
})

class App extends Component {
  state = {
    count: 0,
    name: 0
  }
  render() {
    return (
      <Fragment>
        <Foo count={this.state.count} ></Foo>
        <button onClick={() => { this.setState(() => ({ count:this.state.count+1 })) }}>加count</button>
        <button onClick={() => { this.setState(() => ({ name: this.state.count+1 })) }}>加name</button>
      </Fragment>

    )
  }
}