ReactNative入门教程-组件生命周期函数

简介: ReactNative入门教程-组件生命周期函数

微信图片_20220609121547.png

1.组件实例化阶段


defaultProps:


设置组件的初始属性值,比如设置默认Color,width等,可以在通过this.props获取相应的值

constructor(props):


这里通过this.props可以获取defaultProps设置的默认属性值,同时这里用于初始化控件的可变化的变量,通过this.state设置变量的初始值,通过this.setState()函数修改变量的值,调用render()函数重新渲染页面,得到新的页面

微信图片_20220609121643.png

componentWillMount:


组件将要被加载到视图之前调用

render(): 第一次被调用,用于渲染页面

componentDidMount:


在调用了render方法,组件加载完成并被成功渲染出来之后,所要执行的后续操作,一般都会在这个函数中进行,比如经常要面对的网络请求等加载数据操作,因为UI渲染是异步的,所以在这个函数里面进行网络请求,能够避免出现UI错误。


2.组件运行时阶段


组件的属性prop和状态state任何一个改变都可能会触发render()函数渲染页面

componentWillReceiveProps:


指父元素对组件的props进行了修改

shouldComponentUpdate


一般用于优化性能,通过业务逻辑判断返回true或false,来决定页面是否进行重新绘制,默认返回true,执行后面两个周期函数

componentWillUpdate:


组件刷新前调用

componentDidUpdate:更新后

微信图片_20220609121725.png

3.页面卸载页面:


componentWillUnmount

一般用于清理工作,比如移除事件监听,取消定时器等

微信图片_20220609121749.png

4.生命周期函数调用次数


微信图片_20220609121815.png

特别提示:


更新state必须使用setState()函数,setState是一个异步的函数:setState(update,[callback])

setState()不是立刻更新组件。其可能是批处理或推迟更新。这使得在调用setState()后立刻读取this.state的一个潜在陷阱。代替地,使用componentDidUpdate或一个setState回调(setState(updater, callback)),当中的每个方法都会保证在更新被应用之后触发。

参考文档:https://react.docschina.org/d...

目录
相关文章
|
15天前
|
小程序
【边做边学】uniapp里面的生命周期钩子函数
【边做边学】uniapp里面的生命周期钩子函数
|
2月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
3月前
uniapp的生命周期是什么
uniapp的生命周期是什么
51 0
|
8月前
|
前端开发
如何创建一个 react 项目及如何运行?
要求:Node>=8.10 并且 npm>=5.6 建议:Node>=10.14.2,否则会报错:error babel-jest@26.6.3: The engine “node” is incompatible with this module. Expected version “>= 10.14.2”. Got “10.13.0”
160 0
|
20天前
|
JavaScript 前端开发
【前端学习】—Vue生命周期(十七)
【前端学习】—Vue生命周期(十七)
|
9月前
|
开发框架 开发者
uniapp生命周期
uniapp生命周期
357 0
|
9月前
|
移动开发 开发框架 JavaScript
什么是组件,以及前端各种框架组件的使用方法
什么是组件,以及前端各种框架组件的使用方法
151 1
|
JavaScript 前端开发 API
ReactJS 101:构建可重用组件、管理状态和创建实际应用程序的初学者指南
ReactJS 101:构建可重用组件、管理状态和创建实际应用程序的初学者指南
122 0
|
前端开发 JavaScript C++
前端知识库Reactjs进阶系列(组件的加载过程)
最近在项目中遇到react的组件多次渲染的问题,最后虽然顺利解决了但也同时发现了自己对于react生命周期的不熟悉,于是便找出react的文档重新去了解下,重新学习之后总结为以下两个主要知识点:react组件的整个渲染流程 react组件更新的注意点。
|
存储 资源调度 前端开发
搭建Vue3组件库:第十二章 使用 Monorepo 方式管理组件生态
本章介绍采用Monorepo的方式管理组件生态
859 0
搭建Vue3组件库:第十二章 使用 Monorepo 方式管理组件生态