本文转自:航哥
一个
React Native 组件从它被 React Native 框架加载,到最终被 React Native 框架卸载,会经历一个完整的生命周期。
在这个生命周期中,我们可以定义一些生命周期函数,用来处理在特定条件下
React Native 组件将要执行的操作,比如在某个时间点读取数据等。
本文将对组件的生命周期做个详细的介绍。
一、组件的生命周期
组件的生命周期一般分为这
4 个阶段:创建阶段、实例化阶段、运行(更新)阶段、销毁阶段。下面对各个阶段分别进行介绍。
1,创建阶段
- 该阶段主要发生在创建组件类的时候,在这个阶段中会初始化组件的属性类型和默认属性。通常会将固定的内容放在这个过程中进行初始化和赋值。
- 在 ES6 中统一使用 static 成员来实现。
1
2
3
4
|
static defaultProps = {
autoPlay:
false
,
maxLoop: 10,
};
|
2,实例化阶段
该阶段主要发生在实例化组件类的时候,也就是该组件类被调用的时候触发。这个阶段会触发一系列的流程,按执行顺序如下:
- constructor:构造函数,这里主要对组件的一些状态进行初始化。
- componentWillMount:准备加载组件,可以在这里做一些业务初始化操作,或者设置组件状态。
- render:生成页面需要的 DOM 结构,并返回该结构。
- componentDidMount:组件加载成功并被成功渲染出来后执行。一般会将网络请求等加载数据的操作放在这里进行,保证不会出现 UI 上的错误。
3,运行(更新)阶段
该阶段主要发生在用户操作之后或者父组件有更新的时候,此时会根据用户的操作行为进行相应的页面结构的调整。这个阶段也会触发一系列的流程,按执行顺序如下:
- componentWillReceiveProps:当组件接收到新的 props 时,会触发该函数。在该函数中,通常可以调用 this.setState 方法来完成对 state 的修改。
- shouldComponentUpdate:该方法用来拦截新的 props 或 state,然后根据事先设定好的判断逻辑,做出最后要不要更新组件的决定。
- componentWillUpdate:当上面的方法拦截返回 true 的时候,就可以在该方法中做一些更新之前的操作。
- render:根据一系列的 diff 算法,生成需要更新的虚拟 DOM 数据。(注意:在 render 中最好只做数据和模板的组合,不应进行 state 等逻辑的修改,这样组件结构会更加清晰)
- componentDidUpdate:该方法在组件的更新已经同步到 DOM 中去后触发,我们常在该方法中做 DOM 操作。
4,销毁阶段
该阶段主要在组件消亡的时候触发。
- componentWillUnmount:当组件要被从界面上移除时就会调用。可以在这个函数中做一些相关的清理工作,例如取消计时器、网络请求等。
二、生命周期函数详细介绍
1,constructor
(1)函数原型
1
|
constructor(props)
|
(2)基本介绍
- 它是组件的构造函数。它的第一个语句必须是 super(props)。
- 构造函数将在组件被加载前最先调用,并且仅调用一次。
(3)常见用途
构造函数最大的作用,就是在这里定义状态机变量。
2,componentWillMount
(1)函数原型
1
|
componentWillMount()
|
(2)基本介绍
- 在组件的生命周期中,这个函数只会被执行一次。
- 这个函数无参数并且不需要任何返回值。
- 它在初始渲染(render 函数被 React Native 框架调用执行)前被执行,当它执行完后, render 函数会马上被 React Native 框架调用执行。注意:如果在这个函数里调用 setstate 函数改变了某些状态机变量的值, React Native 框架不会执行渲染操作,而是等待这个函数执行完成后再执行初始渲染。
- 如果子组件也有 componentWillMount 函数,它会在父组件的 componentWillMount 函数之后被调用。
(3)常见用途
如果我们需要从本地存储中读取数据用于显示,那么在这个函数里进行读取是一个很好的时机。
3,render
(1)函数原型
1
|
render()
|
(2)基本介绍
- render 是一个组件必须有的方法,用于界面渲染。
- 这个函数无参数,返回 JSX 或者其他组件来构成 DOM。注意:只能返回一个*元素。
4,componentDidMount
(1)函数原型
1
|
componentDidMount()
|
(2)基本介绍
- 在组件的生命周期中,这个函数只会被执行一次。
- 这个函数无参数并且不需要任何返回值。
- 它在初始渲染执行完成后会马上被调用。在组件生命周期的这个时间点之后,开发者可以通过子组件的引用来访问、操作任何子组件。
- 如果子组件也有 componentDidMount 函数,它会在父组件的 componentDidMount 函数之前被调用。
(3)常见用途
如果
React Native 应用需要在程序启动并显示初始界面后从网络侧获取数据,那么把从网络侧获取数据的代码放在这个函数里是一个不错的选择。
5,componentWillReceiveProps
(1)函数原型
1
|
componentWillReceiveProps(nextProps)
|
(2)基本介绍
- 组件的初始渲染执行完成后,当组件接收到新的 props 时,这个函数将被调用。
- 这个函数不需要返回值。接收一个 object 参数, object 里是新的 props。
- 如果新的 props 会导致界面重新渲染,这个函数将在渲染前被执行。在这个函数中,老的 props 可以通过 this.props 访问,新的 props 在传入的 object 中。
- 如果在这个函数中通过调用 this.setState 函数改变某些状态机变量的值, React Native 框架不会执行对这些状态机变量改变的渲染,而是等 componentWillReceiveProps 函数执行完成后一起渲染。
注意:
当 React Native 初次被渲染时,componentWillReceiveProps 函数并不会被触发,这种机制是故意设计的。
当 React Native 初次被渲染时,componentWillReceiveProps 函数并不会被触发,这种机制是故意设计的。
6,shouldComponentUpdate
(1)函数原型
1
|
boolean shouldComponentUpdate(nextProps, nextState)
|
(2)基本介绍
- 组件的初始渲染执行完成后,当组件接收到新的 state 或者 props 时这个函数将被调用。
- 该函数接收两个 object 参数,其中第一个是新的 props,第二个是新的 state。
- 该函数需要返回一个布尔值,告诉 React Native 框架针对这次改变,是否需要重新渲染本组件。默认返回 true。如果此函数返回 false,React Native 将不会重新渲染本组件,相应的,该组件的 componentWillUpdate 和 componentDidUpdate 函数也不会被调用。
(3)常见用途
- 这个函数常常用来阻止不必要的重新渲染,提高 React Native 应用程序性能。
- 比如我们可以在该函数中比较新老版本的 state 和 props,判断是否需要进行重新渲染。下面是一个简单的使用样例:
1
2
3
4
|
shouldComponentUpdate(nextProps, nextState) {
if
(
this
.state.inputedNum.length < 3)
return
false ;
return
true ;
}
|
7,componentWillUpdate
(1)函数原型
1
|
componentWillUpdate(nextProps, nextState)
|
(2)基本介绍
- 组件的初始渲染执行完成后, React Native 框架在重新渲染该组件前会调用这个函数。
- 该函数不需要返回值,接收两个 object 参数,其中第一个是新的 props,第二个是新的 state。
- 我们可以在这个函数中为即将发生的重新渲染做一些准备工作,但不能在这个函数中通过 this.setState 再次改变状态机变量的值。如果需要改变,则在 componentWillReceiveProps 函数中进行改变。
8,componentDidUpdate
(1)函数原型
1
|
componentDidUpdate(prevProps, prevState)
|
(2)基本介绍
- 组件的初始渲染执行完成后,React Native 框架在重新渲染该组件完成后会调用这个函数。
- 该函数不需要返回值,接收两个 object 参数,其中第一个是渲染前的 props,第二个是渲染前的 state。
9,componentWillUnmount
(1)函数原型
1
|
componentWillUnmount()
|
(2)基本介绍
- 在组件被卸载前,这个函数将被执行。
- 这个函数没有参数,也没不需要返回值。
(3)常见用途
如果组件申请了某些资源或者订阅了某些消息,那么需要在这个函数中释放资源,取消订阅。
三、完整的样例
下面通过一个简单的文本显示组件,来演示组件各个环节的运作流程。同时这里把组件整个生命周期中所有会触发的方法都列出来了。
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
import React, { Component } from
'react'
;
import {
AppRegistry,
StyleSheet,
TextInput,
View,
Text,
Clipboard
} from
'react-native'
;
export
default
class Main extends Component {
//构造函数
constructor(props) {
super
(props);
console.log(
"constructor"
);
//初始化状态值
this
.state = {message:
"欢迎访问 hangge.com"
}
}
//准备加载组件
componentWillMount() {
console.log(
"componentWillMount"
);
}
//渲染界面
render() {
console.log(
"render"
);
return
(
<View style={styles.container}>
<Text style={styles.info}>
{
this
.state.message}
</Text>
</View>
);
}
//组件加载成功并渲染出来
componentDidMount() {
console.log(
"componentDidMount"
);
}
//组件接收到新的 props 时触发
componentWillReceiveProps(nextProps) {
console.log(
"componentWillReceiveProps"
);
}
//决定是否需要更新组件
shouldComponentUpdate(nextProps, nextState) {
console.log(
"shouldComponentUpdate"
);
}
//组件重新渲染前会调用
componentWillUpdate(nextProps, nextState) {
console.log(
"componentWillUpdate"
);
}
//组件重新渲染后会调用
componentDidUpdate(prevProps, prevState) {
console.log(
"componentDidUpdate"
);
}
//组件被卸载前会调用
componentWillUnmount() {
console.log(
"componentWillUnmount"
);
}
}
const styles = StyleSheet.create({
container:{
flex:1,
marginTop:40,
alignItems:
'center'
,
},
info:{
fontSize:20,
},
});
AppRegistry.registerComponent(
'HelloWorld'
, () => Main);
|
控制台输出信息如下(由于样例中我没有更新状态,也没有销毁组件。所以也就没有后面两个阶段):
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1765.html