React 中性能优化、 memo、 PureComponent、shouldComponentUpdate 的使用

React 中性能优化、 memo、 PureComponent、shouldComponentUpdate 的使用

场景

React 是一个用于构建用户界面的 JavaScript 库，主要负责将数据转换为视图，要保证数据和视图的统一，react 通过 重新 render 来保证数据和视图的统一，但当数据没有变化时，视图重新渲染，就会造成不必要的性能浪费

看下面这个例子，

  import React from 'react'

  class Children extends React.Component {
   
    render () {
   
      console.log(' Children render ')
      return (<div>Children Component </div>)
    }
  }

  export default class Parnet extends React.Component {
   
    state = {
   
      count: 0
    }
    render () {
   
      return (
        <div> 
          <button onClick={
   () => {
    this.setState({
    count: this.state.count + 1})}}>button</button>
          <Children></Children>
          count: {
    this.state.count }
        </div>
      )
    }
  }

这个例子主要是用两个组件，一个 Parent 组件 和 一个 Children 组件，当我们在修改 Parent 组件的 count 时， Parent 组件应该重新渲染，保持数据 和 视图的统一，而 Children 组件 这个时候应不应该重新渲染呢，按道理，不会重新渲染，因为他本身的数据没有变，但当我们点击按钮的时候，发现 每次 count 改变， Children 组件都会重新渲染一次，这明显存在问题，而 react 提供了几种方案，供我们解决这种问题

shouldComponentUpdate

生命周期 shouldComponentUpdate 如果返回 false，该组件就不会重新渲染，我们认为，只要 Children 组件当前的 name 和 下一次 更新的值 相等，那么 Children 组件就没必要重新渲染，shouldComponentUpdate 函数 接受两个参数，第一个是 下一次更新的 porps 值，第二个 是 下一次 更新的 state 值， 只需要当 nextProps.name === this.props.name 时，return false，Children 就不会重新渲染

  import React from 'react'

  class Children extends React.Component {
   
    // 利用生命周期 shouldComponentUpdate 对 xia
    shouldComponentUpdate (nextProps, nextState) {
   
      if (nextProps.name === this.props.name) return false
      return true
    }
    render () {
   
      console.log(' Children render ')
      return (<div>Children Component name {
    this.props.name }</div>)
    }
  }

  export default class Parnet extends React.Component {
   
    state = {
   
      count: 0
    }
    render () {
   
      return (
        <div>