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将会检查前一个状态和参数是否和下一个状态和参数是否相同，如果相同，组件将不会被渲染，如果不同，组件将会被重新渲染。