(精华)2020年7月26日 React 组件的生命周期

import React from 'react';
import logo from './logo.svg';
import './App.css';
class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      msg:'第一次的消息'
    }
  }
  componentWillMount(){
    console.log(this.state.msg);
    
  }
  componentDidMount(){
    console.log('我在render之后');
    // 一般会在这里调用ajax请求 组件已经挂载了 可以放心的获取渲染出来的dom 所以在这个阶段是最合适的 
  }
  componentWillUpdate(){
    console.log('我即将更新');
    
  }
  componentDidUpdate(){
    console.log('我更新完毕');
    
  }
  // 在初始化的时候不会立马执行 会在component接收到新的状态props的时候被触发 
    // 一般用于父组件更新的时候 子组件的重新渲染
    // 在react中 不是根据数据内容来判断的 而是根据数据的引用来判断的 父组件[...info]拷贝解决
  componentWillReceiveProps(nextProps){
    console.log(nextProps.todos);
    console.log(this.props.todos);
  }
  shouldComponentUpdate(nextProps,nextState){
    console.log(nextState);
    console.log(this.state.msg);
    return false
  }
  handelClick = ()=>{
    this.setState({
      msg:'我是更新后的数据'
    })
  }
  componentWillUnmount(){
    // 会做一些收尾的工作 
    // 清除定时器
    console.log('我即将被卸载');
    
  }
  handelUnMount = ()=>{
    React.unmountComponentAtNode(document.getElementById('root'))
  }
  render(){
    const {msg} = this.state; 
    return(
      <div>
        <h1>{msg}</h1>
        <button onClick={this.handelClick}>更新</button>
        <button onClick={this.handelUnMount}>卸载</button>
      </div>
    )
  }
}

export default App;