(精华)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;


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
  
66
 

文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。

原文链接：codeboy.blog.csdn.net/article/details/107601386