React生命周期函数的使用场景

Posted 2021-03-07 nayek

使用shouldComponentUpdate( ) 生命周期函数，减少render函数的执行，减少对未发生改变的DOM结点的重复渲染。

  shouldComponentUpdate(nextProps, nextState) {
    if(nextProps.content !== this.props.content) {
      return true
    }else {
      return false
    }
  }

render() {
    console.log('child render')
    const { content } = this.props
    return (
        <li onClick={this.handleClick}>
          { content }
          {/* { this.props.content } */}
        </li>
    )
  }

若从父组件传来的content内容未发生改变则返回false（此部分查看React中生命周期函数文章）