react中组件的性能优化----减少不必要的重新渲染shouldComponentUpdate

如何实现不必要的重新渲染：

通过生命周期的钩子函数sholdComponentUpdate（）进行判断是否进行更新渲染，这个钩子函数在render（）方法调用之前调用，如果该钩子函数的返回值为true，代表需要重新渲染，如果为false，代表不需要重新渲染。

这个是在父组件中直接进行state的比较是否进行了更新

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  组件性能优化：
*/

// 生成随机数
class App extends React.Component {
  state = {
    number: 0
  }

  handleClick = () => {
    this.setState(() => {
      return {
        number: Math.floor(Math.random() * 3)
      }
    })
  }

  // 因为两次生成的随机数可能相同，如果相同，此时，不需要重新渲染
  shouldComponentUpdate(nextProps, nextState) {
    console.log('最新状态：', nextState, ', 当前状态：', this.state)

    return nextState.number !== this.state.number

    // if (nextState.number !== this.state.number) {
    //   return true
    // }
    // return false

    // if (nextState.number === this.state.number) {
    //   return false
    // }
    // return true
  }


  render() {
    console.log('render')
    return (
      <div>
        <h1>随机数：{this.state.number}</h1>
        <button onClick={this.handleClick}>重新生成</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

这个是将父组件进行了拆分，在子组件中进行比较props前后两个值，其中nextProps和nextState都是为当前组件最新的值

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  组件性能优化：
*/

// 生成随机数
class App extends React.Component {
  state = {
    number: 0
  }

  handleClick = () => {
    this.setState(() => {
      return {
        number: Math.floor(Math.random() * 3)
      }
    })
  }

  // 因为两次生成的随机数可能相同，如果相同，此时，不需要重新渲染
  // shouldComponentUpdate(nextProps, nextState) {
  //   console.log('最新状态：', nextState, ', 当前状态：', this.state)
  //   return nextState.number !== this.state.number
  // }

  render() {
    // console.log('render')
    return (
      <div>
        <NumberBox number={this.state.number} />
        <button onClick={this.handleClick}>重新生成</button>
      </div>
    )
  }
}

class NumberBox extends React.Component {
  shouldComponentUpdate(nextProps) {
    console.log('最新props：', nextProps, ', 当前props：', this.props)
    // 如果前后两次的number值相同，就返回false，不更新组件
    return nextProps.number !== this.props.number

    // if (nextProps.number === this.props.number) {
    //   return false
    // }
    // return true
  }
  render() {
    console.log('子组件中的render')
    return <h1>随机数：{this.props.number}</h1>
  }
}

ReactDOM.render(<App />, document.getElementById('root'))