react学习第五天

react生命周期:组件从实例化到渲染到最终从页面中销毁,整个过程就是生命周期,在这个生命周期中,我们有许多可以调用的事件,也俗称为钩子函数。

生命周期的3个状态:

  • mounting:将组件插入到DOM中
  • updating:将数据更新到DOM中
  • unmounting:将组件移除DOM中

生命周期钩子函数:

  • componentWillMount:组件将要渲染
  • componentDidMount:组件渲染完毕
  • componentWillReceiveProps:组件将要接收props数据
  • shouldComponentUpdate:在组件接收到新的state或者props,判断是否更新,返回布尔值
  • componentWillUpdate:组件将要更新
  • componentDidUpdate:组件更新完毕
  • componentWillUnmount:组件将要卸载
import React from 'react';
import ReactDOM from 'react-dom';

class Compile extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      msg: 'hello world'
    }
    console.log('constuctor构造函数')
  }
  componentWillMount(){
    console.log('组件将要渲染')
  }
  componentDidMount(){
    console.log('组件渲染完毕')
  }
  componentWillReceiveProps(){
    console.log('组件将要接收新的state或props')
  }
  shouldComponentUpdate(){
    //如果希望更新就返回为真,不希望更新返回false
    console.log('进行判断是否要更新内容')
    if(this.state.msg === 'hello world'){
      //表示希望更新数据
      return true
    }else{
      return false
    }
  }
  componentWillUpdate(){
    console.log('组件将要更新')
  }
  componentDidUpdate(){
    console.log('组件更新完毕')
  }
  componentWillUnmount(){
    console.log('组件将要移除')
  }
  render(){
    console.log('render渲染函数')
    return  (
      <div>
        <h1>{this.state.msg}</h1>
        <button onClick={this.changeMsg}>组件更新</button>
      </div>
    )
  }
  changeMsg=()=>{
    this.setState ({
      msg:'hello gyt'
    })
  }
}
class Father extends React.Component{
  constructor(props){
    super(props)
    this.state={
      isShow: true
    }
  }
  render(){
    if(this.state.isShow){
      return (
        <div>
          <button onClick={this.removeCom}>移除组件</button>
          <Compile/>
        </div>
      )
    }else{
      return <h1>将组件移除</h1>
    }
  }
  removeCom=()=>{
    this.setState({
      isShow: false
    })
  }
}

ReactDOM.render(
  <Father/>,
  document.querySelector('#root')
)

页面渲染如下:
在这里插入图片描述
点击组件更新,控制台输出:
在这里插入图片描述
点击组件移除,控制台输出:
在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页