一个 React Native 组件从它被 React Native 框架加载,到最终被 React Native 框架卸载,会经历一个完整的生命周期。
在这个生命周期中,我们可以定义一些生命周期函数,用来处理在特定条件下 React Native 组件将要执行的操作,比如在某个时间点读取数据等。
在iOS中UIViewController
提供了(void)viewWillAppear:(BOOL)animated
, - (void)viewDidLoad
,(void)viewWillDisappear:(BOOL)animated
等生命周期方法
在Android中Activity
则提供了 onCreate()
,onStart()
,onResume()
,onPause()
,onStop()
,onDestroy()
等生命周期方法,这些生命周期方法展示了一个界面从创建到销毁的一生
那么在React 中组件(Component)也是有自己的生命周期方法的
组件的生命周期分成三个状态:
你会发现这些React 中组件(Component)的生命周期方法从写法上和iOS中
UIViewController
的生命周期方法很像,React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用。
Mounting(装载)分为创建阶段和实例化阶段
创建阶段
static defaultProps = {
autoPlay: false,
maxLoop: 10,
};
实例化阶段
该阶段主要发生在实例化组件类的时候,也就是该组件类被调用的时候触发。这个阶段会触发一系列的流程,按执行顺序如下:
getInitialState()
: 在组件挂载之前调用一次。这里主要对组件的一些状态进行初始化。其实就是
constructorcomponentWillMount()
:服务器端和客户端都只调用一次,准备加载组件,这里可以做一些业务初始化操作或者设置组件状态componentDidMount()
:在组件加载成功并初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用),一般会将网络请求等加载数据的操作放在这里进行,保证不会出现 UI 上的错误import React, { Component } from 'react';
import { Text } from 'react-native';
export default class LifecycleComponent extends Component {
// 组件初始化的时候进行调用,其实就是调用getInitialState()方法
constructor(props){
super(props)
console.log('constructor.....')
}
// 初始化渲染执行之前立刻调用
componentWillMount() {
console.log('componentWillMount.....')
}
// 初始化渲染执行之后立刻调用一次,render之后才调用
componentDidMount() {
console.log('componentDidMount......')
}
render() {
console.log('render......')
return 你好我在学习RN
}
}
该阶段主要发生在用户操作之后或者父组件有更新的时候,此时会根据用户的操作行为进行相应的页面结构的调整。这个阶段也会触发一系列的流程,按执行顺序如下:
componentWillReceiveProps(
当上面的方法拦截返回 true 的时候,就可以在该方法中做一些更新之前的操作)
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class LifecycleComponent extends Component {
constructor(props){
super(props)
this.state = {
count: 0
}
}
componentWillReceiveProps(nextProps, nextContext) {
console.log('componentWillReceiveProps...............')
}
shouldComponentUpdate(nextProps, nextState, nextContext) {
console.log('shouldComponentUpdate...............')
return true
}
componentWillUpdate(nextProps, nextState, nextContext) {
console.log('componentWillUpdate...............')
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('componentDidUpdate...............')
}
render() {
console.log('render...............')
return {
this.setState({
count: this.state.count+1
})
}}>你好我在学习RN,学习次数:{this.state.count}
}
}
该阶段主要在组件消亡的时候触发。
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class LifecycleComponent extends Component {
constructor(props){
super(props)
this.state = {
count: 0
}
}
componentWillUnmount() {
console.log('componentWillUnmount........')
}
render() {
console.log('render...............')
return {
this.setState({
count: this.state.count+1
})
}}>你好我在学习RN,学习次数:{this.state.count}
}
}
在App.js中通过点击将上面这个组件引入或者移除的时候就会触发componentWillUnmount方法
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import LifecycleComponent from './LifecycleComponent';
export default class HelloWorldApp extends Component {
constructor(props){
super(props)
this.state = ({
remove: false
})
}
render() {
var view = this.state.remove ? null :
var text = this.state.remove ? '让他显示' : '干掉他'
return (
{
this.setState({
remove: !this.remove
})
}}> {text}
{view}
);
}
}
函数原型:constructor(props)
基本介绍:
常见用途:构造函数最大的作用,就是在这里定义状态机变量
函数原型:componentWillMount()
基本介绍:
常见用途:如果我们需要从本地存储中读取数据用于显示,那么在这个函数里进行读取是一个很好的时机。
函数原型:render()
基本介绍:
函数原型:componentDidMount()
基本介绍
常见用途:如果 React Native 应用需要在程序启动并显示初始界面后从网络侧获取数据,那么把从网络侧获取数据的代码放在这个函数里是一个不错的选择。
函数原型:componentWillReceiveProps()
基本介绍
函数原型:boolean shouldComponentUpdate(nextProps, nextState)
基本介绍:
常见用途:
shouldComponentUpdate(nextProps, nextState) {
if(this.state.inputedNum.length < 3) return false;
return true;
}
函数原型:componentWillUpdate(nextProps, nextState)
基本介绍:
函数原型:componentWillUpdate(nextProps, nextState)
基本介绍:
函数原型:componentWillUnmount()
基本介绍:
常见用途:
如果组件申请了某些资源或者订阅了某些消息,那么需要在这个函数中释放资源,取消订阅。
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 (
{this.state.message}
);
}
//组件加载成功并渲染出来
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);