React---组件的生命周期

2021年09月15日 阅读数:1
这篇文章主要向大家介绍React---组件的生命周期,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1、理解

  1. 组件从建立到死亡它会经历一些特定的阶段。
  2. React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
  3. 咱们在定义组件时,会在特定的生命周期回调函数中,作特定的工做。

2、 生命周期流程图()

 

生命周期的三个阶段(旧)ajax

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染babel

  1. constructor()
  2. componentWillMount() // 组件将要挂载
  3. render()
  4. componentDidMount() // 组件挂载完毕,初始化操做,开启定时器、发送网络请求、订阅消息

2. 更新阶段: 由组件内部this.setSate()或父组件从新render触发网络

  1. shouldComponentUpdate()  // 控制组件更新的“阀门”
  2. componentWillUpdate()  // 组件将要更新
  3. render()
  4. componentDidUpdate()  // 组件更新完毕

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发函数

  1. componentWillUnmount()  // 常作收尾工做,例如:关闭定时器、取消订阅消息

4. 组件将要接收新的props,componentWillReceivePropsui

 3、生命周期流程图(新17.0.1版本)

 

生命周期的三个阶段(新)this

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染spa

  1. constructor()
  2. getDerivedStateFromProps
  3. render()
  4. componentDidMount()

2. 更新阶段: 由组件内部this.setSate()或父组件从新render触发.net

  1. getDerivedStateFromProps // 若state的值在任什么时候候都取决于props,那么可使用getDerivedStateFromProps
  2. shouldComponentUpdate()
  3. render()
  4. getSnapshotBeforeUpdate  // 在更新以前获取快照
  5. componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发code

  1. componentWillUnmount()

 4、重要的钩子

  1. render:初始化渲染或更新渲染调用
  2. componentDidMount:开启监听, 发送ajax请求
  3. componentWillUnmount:作一些收尾工做, 如: 清理定时器
  4. componentWillMount
  5. componentWillReceiveProps
  6. componentWillUpdate

5、 即将废弃的勾子

如今使用会出现警告,下一个大版本须要加上UNSAFE_前缀才能使用,之后可能会被完全废弃,不建议使用。component

6、案例

一、新生命周期

 1 <script type="text/babel">
 2         //建立组件
 3         class Count extends React.Component{
 4             //构造器
 5             constructor(props){
 6                 console.log('Count---constructor');
 7                 super(props)
 8                 //初始化状态
 9                 this.state = {count:0}
10             }
11 
12             //加1按钮的回调
13             add = ()=>{
14                 //获取原状态
15                 const {count} = this.state
16                 //更新状态
17                 this.setState({count:count+1})
18             }
19 
20             //卸载组件按钮的回调
21             death = ()=>{
22                 ReactDOM.unmountComponentAtNode(document.getElementById('test'))
23             }
24 
25             //强制更新按钮的回调
26             force = ()=>{
27                 this.forceUpdate()
28             }
29             
30             //若state的值在任什么时候候都取决于props,那么可使用getDerivedStateFromProps
31             static getDerivedStateFromProps(props,state){
32                 console.log('getDerivedStateFromProps',props,state);
33                 return null
34             }
35 
36             //在更新以前获取快照
37             getSnapshotBeforeUpdate(){
38                 console.log('getSnapshotBeforeUpdate');
39                 return 'atguigu'
40             }
41 
42             //组件挂载完毕的钩子
43             componentDidMount(){
44                 console.log('Count---componentDidMount');
45             }
46 
47             //组件将要卸载的钩子
48             componentWillUnmount(){
49                 console.log('Count---componentWillUnmount');
50             }
51 
52             //控制组件更新的“阀门”
53             shouldComponentUpdate(){
54                 console.log('Count---shouldComponentUpdate');
55                 return true
56             }
57 
58             //组件更新完毕的钩子
59             componentDidUpdate(preProps,preState,snapshotValue){
60                 console.log('Count---componentDidUpdate',preProps,preState,snapshotValue);
61             }
62             
63             render(){
64                 console.log('Count---render');
65                 const {count} = this.state
66                 return(
67                     <div>
68                         <h2>当前求和为:{count}</h2>
69                         <button onClick={this.add}>点我+1</button>
70                         <button onClick={this.death}>卸载组件</button>
71                         <button onClick={this.force}>不更改任何状态中的数据,强制更新一下</button>
72                     </div>
73                 )
74             }
75         }
76         
77         //渲染组件
78         ReactDOM.render(<Count count={199}/>,document.getElementById('test'))
79     </script>

二、旧生命周期

  1 <script type="text/babel">
  2         //建立组件
  3         class Count extends React.Component{
  4 
  5             //构造器
  6             constructor(props){
  7                 console.log('Count---constructor');
  8                 super(props)
  9                 //初始化状态
 10                 this.state = {count:0}
 11             }
 12 
 13             //加1按钮的回调
 14             add = ()=>{
 15                 //获取原状态
 16                 const {count} = this.state
 17                 //更新状态
 18                 this.setState({count:count+1})
 19             }
 20 
 21             //卸载组件按钮的回调
 22             death = ()=>{
 23                 ReactDOM.unmountComponentAtNode(document.getElementById('test'))
 24             }
 25 
 26             //强制更新按钮的回调
 27             force = ()=>{
 28                 this.forceUpdate()
 29             }
 30 
 31             //组件将要挂载的钩子
 32             componentWillMount(){
 33                 console.log('Count---componentWillMount');
 34             }
 35 
 36             //组件挂载完毕的钩子
 37             componentDidMount(){
 38                 console.log('Count---componentDidMount');
 39             }
 40 
 41             //组件将要卸载的钩子
 42             componentWillUnmount(){
 43                 console.log('Count---componentWillUnmount');
 44             }
 45 
 46             //控制组件更新的“阀门”
 47             shouldComponentUpdate(){
 48                 console.log('Count---shouldComponentUpdate');
 49                 return true
 50             }
 51 
 52             //组件将要更新的钩子
 53             componentWillUpdate(){
 54                 console.log('Count---componentWillUpdate');
 55             }
 56 
 57             //组件更新完毕的钩子
 58             componentDidUpdate(){
 59                 console.log('Count---componentDidUpdate');
 60             }
 61 
 62             render(){
 63                 console.log('Count---render');
 64                 const {count} = this.state
 65                 return(
 66                     <div>
 67                         <h2>当前求和为:{count}</h2>
 68                         <button onClick={this.add}>点我+1</button>
 69                         <button onClick={this.death}>卸载组件</button>
 70                         <button onClick={this.force}>不更改任何状态中的数据,强制更新一下</button>
 71                     </div>
 72                 )
 73             }
 74         }
 75         
 76         //父组件A
 77         class A extends React.Component{
 78             //初始化状态
 79             state = {carName:'奔驰'}
 80 
 81             changeCar = ()=>{
 82                 this.setState({carName:'奥拓'})
 83             }
 84 
 85             render(){
 86                 return(
 87                     <div>
 88                         <div>我是A组件</div>
 89                         <button onClick={this.changeCar}>换车</button>
 90                         <B carName={this.state.carName}/>
 91                     </div>
 92                 )
 93             }
 94         }
 95         
 96         //子组件B
 97         class B extends React.Component{
 98             //组件将要接收新的props的钩子
 99             componentWillReceiveProps(props){
100                 console.log('B---componentWillReceiveProps',props);
101             }
102 
103             //控制组件更新的“阀门”
104             shouldComponentUpdate(){
105                 console.log('B---shouldComponentUpdate');
106                 return true
107             }
108             //组件将要更新的钩子
109             componentWillUpdate(){
110                 console.log('B---componentWillUpdate');
111             }
112 
113             //组件更新完毕的钩子
114             componentDidUpdate(){
115                 console.log('B---componentDidUpdate');
116             }
117 
118             render(){
119                 console.log('B---render');
120                 return(
121                     <div>我是B组件,接收到的车是:{this.props.carName}</div>
122                 )
123             }
124         }
125         
126         //渲染组件
127         ReactDOM.render(<Count/>,document.getElementById('test'))
128     </script>

 

本文同步分享在 博客“半指温柔乐”(CNBlog)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。