react native学习笔记7——组件生命周期
来源:互联网 发布:人工智能湖南论坛 编辑:程序博客网 时间:2024/06/07 02:44
每个组件都有自己的生命周期,在其生命周期内,组件经历了初始化-运行-销毁的过程。在运行阶段,每次状态(state)或属性(props)发生变化时,都有对应的组件方法将该变化通知给组件进行渲染刷新(关于state和props的介绍可以看上一节react native学习笔记6——Props和State)。下图是经典的组件生命周期图解(ES6),该图显示了组件在生命周期的各个时期系统调用的方法。
下面我们根据初始化-运行-销毁三个阶段逐步分析组件生命周期的过程。
初始化
初始化主要发生在创建组件的时候,在这个阶段中会获取组件的默认属性和初始化组件的状态,修改组件状态,渲染组件。在初始化的过程中,会按顺序调用下面4个函数:
constructor(props)
:构造函数,组件实例创建时调用,主要接收从父组件传递过来的props作为组件的初始属性,并初始化state。
在ES5中是属性props的获取和state的初始化是通过
getDefaultProps
和getInitalState
方法来实现
componentWillMount
:准备加载组件,在constructor
构造函数之后,render
前调用,且只调用一次。可以在这里做一些业务初始化操作,也可以设置组件状态,通过setState
方法修改state。
render
:渲染组件,是一个组件中必须有的函数,render
只允许返回一个最外层容器组件。
componentDidMount
:在初始化阶段第一次执行render
之后,组件被成功渲染出来以后立刻调用。一般在该函数中执行网络请求等操作。
运行中
初始化完成之后,组件将会进入到运行中状态,在该阶段中通常会由于与用户发生交互之后、网络请求结果返回、父组件有更新等情况导致组件需要重新渲染更新。运行中阶段可能会执行到如下5个函数:
componentWillReceiveProps(nextProps)
:当父组件有更新传入新的属性给子组件,子组件接收到新的props时,会触发该函数。新的props将会作为参数传递进来,可以用于更新 state 来响应 props 的改变。
boolean shouldComponentUpdate(object nextProps, object nextState)
:该函数决定是否需要更新组件,在接收到新的props或state时,将要渲染之前调用,返回 false表示不用重新渲染,返回true将进行渲染。用户可以通过相应的业务逻辑根据情况,对接收到的参数nextProps和nextState判断是否需要更新界面。
componentWillUpdate(object nextProps, object nextState)
:如果前面的shouldComponentUpdate返回为true时调用该函数,在这个函数中可以处理在更新界面之前要做的准备工作。
注意:不能在该函数中更新state和props。
render
:更新界面。
componentDidUpdate(object prevProps,object prevState)
:组件更新完成后立即调用,功能上类似于初始化阶段中的componentDidMount
,该函数的参数是当前的props和state。
销毁
销毁阶段主要发生组件销亡的时候。
componentWillUnmount()
:组件被移除时调用,可在该函数中执行一些清理工作,如取消事件绑定,移除无用计时器。
日志跟踪理解组件生命周期
为了加深记忆,通过代码实例打印组件生命周期中的被执行的各个函数。
1.下面示例演示状态改变时生命周期中各函数的调用顺序:
LifecycleDemo.js
import React,{Component} from 'react';import { Text, View,} from 'react-native';export default class Greeting extends Component { //初始化获取父组件的 constructor(props) { super(props); console.log("getDefaultProps"); this.state = {name: props.name}; console.log("getInitialState"); } // 在render之前调用 componentWillMount(){ console.log("componentWillMount"); } componentWillUnMount(){ console.log("componentWillUnMount"); } componentWillUpdate(nextProps,nextState){ console.log("componentWillUpdate"); } componentDidUpdate(prevProps,prevState){ console.log("componentDidUpdate"); } componentWillReceiveProps(nextProps){ console.log("componentWillReceiveProps"); } shouldComponentUpdate(nextProps,nextState) { console.log("shouldComponentUpdate"); return true; } render() { console.log("render"); return ( <View style={ {height:40, backgroundColor:"darkgray"}}> <Text>Hello {this.state.name} </Text> </View> ); } changeState(){ console.log("changeState"); this.setState({ name: "React Native" }); } componentDidMount() { console.log("componentDidMount"); this.changeState(); }}
该示例中,在componentDidMount中调用了changeState函数,该函数中通过了setState函数对state进行了设置,这时候就会回调shouldComponentUpdate,如果返回true,则会继续调用componentWillUpdate、render、conponentDidUpdate,之后按返回键退出应用,则会进行销毁操作,回调componentWillUnmount。日志输出为:
该示例的源码在:
https://github.com/mronion0603/ReactNativeExercise/blob/master/src/03_props_state_lifecycle/LifecycleDemo.js
2.对于props属性的改变而触发componentWillReceiveProps的情况稍微复杂点,由于组件自己不能修改自己的props属性(上一节有介绍),导致props改变只能通过父组件指定并向子层组件传递。因此这里我们添加一个父组件:
LifecycleDemo2.js
export default class LifecycleDemo2 extends Component { constructor(props) { super(props); this.state = {name: "onion"}; } render() { return ( <View > <Greeting name ={this.state.name} /> </View> ); } changeState(){ console.log("parent changeState"); this.setState({ name: "xiaofang" }); } componentDidMount() { console.log("parent componentDidMount"); this.changeState(); }}
在父组件的render中使用子组件,并将name属性传给子组件。
<Greeting name ={this.state.name} />
父组件中状态name的初始值是”onion”
constructor(props) { super(props); this.state = {name: "onion"}; }
而当组件加载完成后,即render执行完成后,在componentDidMount中,通过setState函数设置父组件的state.name。
changeState(){ console.log("changeState"); this.setState({ name: "xiaofang" }); }
将父组件的state.name改为”xiaofang”,此时会触发父组件的render重新渲染,因而对子组件重新指定props.name的值。
子组件还是用上面Greeting的例子,不过将头部export default class Greeting extends Component
改为class Greeting extends Component
。
另外为了简化流程,把子组件的componentDidMount中的changeState方法给去掉:
componentDidMount() { console.log("componentDidMount"); //this.changeState();}
由于父组件改变了子组件Greeting的props的属性,子组件中会调用componentWillReceiveProps函数。
其完整示例如下:
import React,{Component} from 'react';import { Text, View,} from 'react-native';class Greeting extends Component { constructor(props) { super(props); this.state = {name: props.name}; console.log("constructor"); } componentWillMount(){ // 在render之前调用 console.log("componentWillMount"); } componentWillUnMount(){ console.log("componentWillUnMount"); } componentWillUpdate(nextProps,nextState){ console.log("componentWillUpdate"); } componentDidUpdate(prevProps,prevState){ console.log("componentDidUpdate"); } componentWillReceiveProps(nextProps){ this.setState({ name: nextProps.name }); console.log("componentWillReceiveProps"); } shouldComponentUpdate(nextProps,nextState) { console.log("shouldComponentUpdate"); return true; } render() { console.log("render"); return ( <View style={ {height:40, backgroundColor:"darkgray"}}> <Text>Hello {this.state.name} </Text> </View> ); } changeState(){ console.log("changeState"); this.setState({ name: "React Native" }); } componentDidMount() { console.log("componentDidMount"); //this.changeState(); } componentWillUnmount(){ console.log("componentWillUnmount"); }}export default class LifecycleDemo2 extends Component { constructor(props) { super(props); this.state = {name: "onion"}; } render() { return ( <View > <Greeting name ={this.state.name} /> </View> ); } changeState(){ console.log("parent changeState"); this.setState({ name: "xiaofang" }); } componentDidMount() { console.log("parent componentDidMount"); this.changeState(); }}
log日志输出结果如下:
该示例源码在:
https://github.com/mronion0603/ReactNativeExercise/blob/master/src/03_props_state_lifecycle/LifecycleDemo2.js
- react native学习笔记7——组件生命周期
- React Native学习笔记(三)组件生命周期
- react-native笔记-----组件的生命周期
- 前端学习 | React-Native 组件生命周期
- React Native 组件生命周期
- react native 组件生命周期
- React Native组件生命周期
- React Native组件生命周期
- react-native 组件生命周期
- React-Native 组件 生命周期
- React Native组件生命周期
- React Native入门——组件构成及生命周期简介
- React Native入门——组件构成及生命周期简介
- React Native入门——组件构成及生命周期简介
- React-Native学习笔记之生命周期
- react native学习笔记9——引入第三方组件和react-navigation的使用
- react-native组件的生命周期
- React Native 组件的生命周期
- log4j实战
- C语言--链表与CMap
- 线性代数的本质(Essense Of Linear Algebra)[1]
- HDU 1260 Tickets
- shell 脚本echo和printf学习
- react native学习笔记7——组件生命周期
- 【Unity与23种设计模式】代理模式(Proxy)
- A
- protect继承
- 【栈】HDU1022Train Problem I
- Java 并发学习
- mysql中utf8_bin、utf8_general_ci、utf8_general_cs编码区别
- 1002. 写出这个数
- 使用sklearn做特征工程