React生命周期

Posted 2021-01-30 pluslius

react生命周期

class Counter extends React.Component {
  static defaultProps = {
    name:‘plus‘
  }
  constructor(props){
     super(props)
     this.state = {
       number:0
     }
     console.log(‘构造函数‘)
  }
  componentWillMount(){
    console.log(‘组件将要加载‘)
  }
  componentDidMount(){
    console.log(‘组件挂载完成‘)
  }
  handleClick = () => {
    this.setState({
      number:this.state.number+1
    })
  }
  shouldComponentUpdate(nextProps,nextState){
    console.log(‘组件是否更新‘)
    return nextState.number % 2
    ///如果此函数种返回了false 就不会调用render方法了
  }
  componentWillUpdate(){
    console.log(‘组件将要更新‘)
  }
  componentDidUpdate(){
    console.log(‘组件更新完成‘)
  }
  render(){
    console.log(‘render‘)
    return (
      <div>
        <p>{this.state.number}</p>
        {this.state.number > 3 ? null :<ChildCounter n={this.state.number}/>}
          <button onClick={this.handleClick}>+</button>
      </div>
    )
  }
}

class ChildCounter extends React.Component{
  componentWillUnMount(){
    console.log(‘组件将要卸载componentWillUnmount‘)
  }
  componentWillMount(){
    console.log(‘child componentWillMount‘)
  }
  render(){
    console.log(‘child-render‘)
    return (<div>
      {this.props.n}
    </div>)
  }
  componentDidMount(){
    console.log(‘child componentDidMount‘)
  }
  componentWillReceiveProps(newProps){ // 第一次不会执行，之后属性更新时才会执行
    console.log(‘child componentWillReceiveProps‘)
  }
  shouldComponentUpdate(nextProps,nextState){
    return nextProps.n % 3; //子组件判断接收的属性 是否满足更新条件 为true则更新
  }
}

ReactDOM.render(<Counter/>,document.getElementById(‘root‘))