react 指定组件进行渲染.，防止多余渲染的三个方法

方法一：使用生命周期函数shouldComponentUpdate()

import React, { Component } from 'react'

class Foo extends Component {

  shouldComponentUpdate(nextProps, nextState) {
    //两个参数nextProps和nextState，表示下一次props和一次state的值
    //生命周期函数shouldComponentUpdate()默认返回ture，返回false时不会渲染render
    if (nextProps.name === this.props.name) {
      return false
    }
    return true
  }

  render() {
    console.log('Foo render')
    return null;
  }
}

export default class App extends Component {
  state = {
    count: 0
  }
  render() {
    return (
      <div>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Add</button>
        {/* 每次点击之后，state改变导致子组件也要重新进行不必要的渲染 */}
        <Foo name="Mike" />
      </div>
    );
  }
}

方法二：使用React.PureComponent

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

class Foo extends PureComponent {
  //React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()
  render() {
    console.log('Foo render')
    return null;
  }
}

export default class App extends Component {
  state = {
    count: 0,
  }
  render() {
    const { preson } = this.state
    return (
      <div>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Add</button>
        {/* 每次点击之后，state改变导致子组件也要重新进行不必要的渲染 */}
        <Foo name="Mike" />
      </div>
    );
  }
}

React.PureComponent可能会因深层的数据不一致而产生错误的否定判断，从而shouldComponentUpdate结果返回false，界面得不到更新

方法三：使用react.memo（针对函数式组件）

import React, { Component, memo } from 'react'
//react.memo适用于函数式组件
//使用方式：只需将函数组件作为参数传入React.memo中
const Foo = memo(function Foo(props) {
  console.log('Foo render')
  return null;
});

export default class App extends Component {
  state = {
    count: 0,
  }
  render() {
    const { preson } = this.state
    return (
      <div>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Add</button>
        {/* 每次点击之后，state改变导致子组件也要重新进行不必要的渲染 */}
        <Foo name="Mike" />
      </div>
    );
  }
}

React.memo会返回一个纯化(purified)的组件MemoFuncComponent，这个组件将会在JSX标记中渲染出来。当组件的参数props和状态state发生改变时，React将会检查前一个状态和参数是否和下一个状态和参数是否相同，如果相同，组件将不会被渲染，如果不同，组件将会被重新渲染。