React Native之组件(Component)生命周期学习笔记

简介: React Native之组件(Component)生命周期学习笔记

1、Component介绍

一般Component需要被其它类进行继承,Component和Android一样,也有生命周期

英文图片如下

20181016003009671.jpg2   具体说明

1)、挂载阶段

constructor() //构造函数,声明之前先调用super(props)

componentWillMount()//因为它发生在render()方法前,因此在该方法内同步设置状态不会引发重渲染

render()//组件加载,该方法必须要有,返回一个React元素,

componentDidMount()//组件加载完成后触发,实例化网络请,设置定时器,设置监听,设置状态会导致重渲染


2)、更新阶段:该阶段表示由状态或属性的改变导致组件的重渲染

componentWillReceiveProps(nextProps)://该方法会在加载好的组件在收到新的状态后调用,这里可以使用setState函数。

shouldComponentUpdate(nextProps, nextState):该方法用来告诉React,组件输出是否受到当前状态或属性的影响,默认情况下,每次状态改变都会导致重渲染,初次渲染不会调用该方法。

componentWillUpdate():该方法在收到新属性和状态渲染前调用,初次渲染不会调用该方法。

render():该方法是mount和update阶段都会使用到的方法,

componentDidUpdate(prevProps, prevState):更新发生后会立即调用该方法,初次渲染不会调用该方法。


3)、销毁阶段

componentWillUnmount():该方法会在组件被销毁前立即调用,实现一些清理工作,如清除定时器,取消网络请求或者是清理其他在componentDidMount()方法内创建的DOM元素。


3  总结:

一般建议componentWillMount,componentDidMount,componentWillReceiveProps方法修改state值

在componentDidMount中,实例化网络请,设置定时器,设置监听。


相关文章
|
3月前
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
126 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
5月前
|
前端开发 JavaScript 算法
React Server Component 使用问题之想在路由切换时保持客户端状态,如何实现
React Server Component 使用问题之想在路由切换时保持客户端状态,如何实现
|
5月前
|
前端开发 JavaScript PHP
React Server Component 使用问题之路由的能力,如何实现
React Server Component 使用问题之路由的能力,如何实现
|
5月前
|
前端开发 JavaScript
React Server Component 使用问题之添加jsx的组件化能力,如何操作
React Server Component 使用问题之添加jsx的组件化能力,如何操作
|
5月前
|
前端开发 PHP 开发者
React Server Component 使用问题之怎么使用Docker运行PHP应用
React Server Component 使用问题之怎么使用Docker运行PHP应用
|
6月前
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
5月前
|
前端开发 JavaScript 开发者
React Server Component 使用问题之为什么选择使用 React 官方的 renderToString 来渲染 HTML,如何解决
React Server Component 使用问题之为什么选择使用 React 官方的 renderToString 来渲染 HTML,如何解决
|
5月前
|
设计模式 前端开发 JavaScript
React开发设计模式及原则概念问题之什么是HOC(Higher-order component),HOC遵循的设计原则都有哪些
React开发设计模式及原则概念问题之什么是HOC(Higher-order component),HOC遵循的设计原则都有哪些
|
7月前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
157 1
|
7月前
|
开发框架 前端开发 JavaScript
移动应用开发中的跨平台策略:Flutter与React Native的比较
在移动应用领域,跨平台解决方案已成为开发者追求高效、成本效益和广泛覆盖的关键。本文深入探讨了两种领先的跨平台框架——Flutter和React Native,从技术架构、性能、社区生态及实际应用案例四个维度进行全面对比分析。通过这一比较,旨在为移动应用开发者提供选择合适框架的参考依据,帮助他们根据项目需求做出明智的决策。