6.1React组件优化 纯组件（Pure Component）与shouldComponentUpdate关系

参考博客： https://segmentfault.com/a/1190000014979065

参考视频：https://www.bilibili.com/video/BV1Zt4y1i7d2?from=search&seid=2794796125273489545

 

问题：父组件包含子组件，当父组件刷新的时候， 会调用子组件的生命周期函数，包括会render一次，导致白白花时间在子组件上面，但是子组件啥都没有干。所以我们需要优化Component。

 

因此，生命周期函数 的阀门，shouldComponent()发挥作用啦、 介绍一下shouldComponent()。

1 返回值 true 函数生命周期继续向下，执行render。 返回值 false，函数生命周期停止，不进行渲染。

2 参数  nextProps和  nextState

this.props的value 和  nextProps 的value 进行对比！如果下次传来的值和这次的相同，那么就说明值没有改变，子组件不需要再刷新了，那么返回false。

 

那么PureComponent就是实现的这个功能。

 

import logo from './logo.svg';
import './App.css';
import React,{Component , PureComponent}  from 'react'

class Sub extends  PureComponent {
  // shouldComponentUpdate(nextProps,nextState){
 
  //   if(nextProps.name === this.props.name) {
  //     return false;
  //   } else {
  //     return true;
  //   }
      
  // }
  //组件的优化。 子组件不需要更新，但是一直在更新。相当于一个阀门。
  render() {
    console.log('我是儿子，sub render');
    return (
      <div>
        我是sub
      </div>
    )
  }
}


class App extends Component {
  
  state = {
    num: 1
  }
  onClick = () =>{
    this.setState({
      num: this.state.num +1 
    })
  }
  render()  {
    console.log('我是父亲组件，App render')
    const {num} = this.state
    return (
      <div>
        <Sub />
        <p>{num}</p>
        <button onClick={this.onClick}>按钮1</button>
      </div>
    )
  }
}

export default App;