ReactNative从零开始笔记2-组件的生命周期

一、使用环境

  • Mac 电脑 系统10.14.2
  • Xcode9.4
  • react-native-cli版本 2.0.1
  • react-native: 0.57.3
  • webstorm
二、ReactNative提供了哪些组件

更多组件使用查看ReactNative组件与API

三、ReactNative组件的生命周期
  • 任何组件都具有生命周期,而掌握生命周期的流程是我们程序搬运工的基本素质;
  • ReactNative组件生命周期可大致分为三个阶段创建、运行、销毁
1.创建阶段,组件实例化阶段

调用顺序如下:

1.1 在实例化组件的时候调用构造函数constructor

  • 调用一次
  • 可以初始化数据state
  • 注意需要加 super.props(); 初始化父类

//1.初始化调用 一次
constructor(props) {
    super(props);
    this.state = {
        age: 0,
        name: '生命周期',
    }
    console.warn('调用constructor');
}

1.2 即将加载组件的时候调用 componentWillMount

  • 调用一次
  • render()之前调用
  • 该函数适合于需要在本地读取一些数据用于显示

  //2.即将加载组件调用 一次
componentWillMount(): void {
    console.warn('调用componentWillMount');
}

1.3 渲染组件render

  • 多次调用
  • 对state变量与属性进行检查, 重新渲染时候调用这个方法
  • 如果不想渲染页面,可以返回null 或者false

//3.渲染组件调用  多次
render() {
     console.warn('调用render()');
    return (
        <View>
            <Button title={'刷新页面'} onPress={()=>{
                this.changeAgeEvent();
            }}></Button>
            <Text>年龄:{this.state.age}</Text>
        </View>
    )
}

1.4 加载组件完成的时候调用componentDidMount

  • render()之后,调用一次
  • 一般可以用作发送网络请求

 // 4.组件加载完成调用 一次
componentDidMount(): void {
    console.warn('调用componentDidMount');
}

创建阶段效果:

image.png
2. 运行阶段

2.1 componentWillReceiveProps

  • 当props(属性)发生改变或者接受到新的props时,该函数被调用,并接受一个输入参数,类型为Object,存放新的props,可以通过this.props访问
  • 作用: 拦截props属性并操作
  • 在这个函数中改变state, 不会立即渲染,需等方法执行完毕一起渲染

 //5.改变属性时候调用props 
componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void {
    console.warn('调用componentWillReceiveProps');
}

2.2 shouldComponentUpdate

  • 需要刷新组件的时候,比如改变props/state时候调用
  • 控制是否刷新组件,调用render(), 返回false不调用
  • 如果不进行渲染,那么该方法后续的componentWillUpdate与componentDidUpdate都不会被执行
  • 系统默认是true

  // 6.需要刷新组件的时候调用,比如改变props/state 控制是否刷新组件
shouldComponentUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean {
    console.warn('shouldComponentUpdate');
    return true;
 }

2.3 componentWillUpdate

  • 组件即将更新时候调用
  • shouldComponentUpdate返回true 才会调用
  • 尽量不要调用this.setState()与改变props,易造成死循环

  // 7.组件即将刷新
componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void {
    console.warn('调用componentWillUpdate');
}

2.4 componentDidUpdate

  • 在重新渲染render之后调用
  • shouldComponentUpdate返回true 才会调用
  • 尽量不要调用this.setState()与改变props,易造成死循环

  // 8. 组件刷新之后
componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
    console.warn('调用componentDidUpdate');
}

运行阶段调用效果


image.png
3. 销毁/卸载组件阶段

componentWillUnmount

  • 组件即将销毁的时候调用
  • 作用: 移除观察者,清楚数据等

  //9. 组件即将销毁的时候调用, 清楚数据
componentWillUnmount(): void {
    console.warn('调用componentWillUnmount');
}
4.其他方法

componentDidCatch

  • render函数渲染出错,调用该函数
  • 作用: 收集错误信息

//10. render出错调用该函数 
componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    console.warn('调用componentDidCatch')
}
5.生命周期完整流程
image.png

完整生命周期代码

  class LifeCycleComponent extends Component {
 //1.初始化调用 一次
constructor(props) {
    super(props);
    this.state = {
        age: 0,
        name: '生命周期',
    }
    console.warn('调用constructor');
}
//2.即将加载组件调用 一次
componentWillMount(): void {
    console.warn('调用componentWillMount');
}

//3.渲染组件调用  多次
render() {
     console.warn('调用render()');
    return (
        <View>
            <Button title={'刷新页面'} onPress={()=>{
                this.changeAgeEvent();
            }}></Button>
            <Text>年龄:{this.state.age}</Text>
        </View>
    )
}

// 4.组件加载完成调用 一次
componentDidMount(): void {
    console.warn('调用componentDidMount');
}

// 方法 改变state age
changeAgeEvent(){
    //按钮点击一次  改变状态中age的值,进行一次render()
    this.setState((prevState, callback)=>{
        return{age: prevState.age +1}
    });
}

//5.改变属性时候调用props 没有顺序
componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void {
    console.warn('调用componentWillReceiveProps');
}

// 6.需要刷新组件的时候调用,比如改变props/state 控制是否刷新组件
shouldComponentUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean {
    console.warn('调用shouldComponentUpdate');
    return true;
}

// 7.组件即将刷新
componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void {
    console.warn('调用componentWillUpdate');
}

// 8. 组件刷新之后
componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
    console.warn('调用componentDidUpdate');
}

//9. 组件即将销毁的时候调用, 清楚数据
componentWillUnmount(): void {
    console.warn('调用componentWillUnmount');
}
//10. render出错调用该函数
componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    console.warn('调用componentDidCatch')
}

}
其他资料
ReactNative从零开始笔记1-初始化项目
ReactNative从零开始笔记2-组件的生命周期
ReactNative从零开始笔记3-state(状态)与props(属性)
ReactNative从零开始笔记4-PropTypes使用
ReactNative从零开始笔记5-组件传值(父子组件/兄弟组件)
ReactNative从零开始笔记6-导航页面传值(正传和逆传)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容