《React Native 精解与实战》书籍连载「React Native 中的生命周期」

简介: 此文是我的出版书籍《React Native 精解与实战》连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习。

此文是我的出版书籍《React Native 精解与实战》连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习。

书籍还配套了视频教程「80 节实战课精通 React Native 开发」,此视频课程建议配合书籍学习,书籍中原理性的东西讲解的比较清晰,而视频教程对于组件、API 等部分的代码实战开发讲解比较直观。

书籍相关所有资料请访问:http://rn.parryqiu.com

3.5 生命周期概念

任何生命体都会经历从出生到消亡的过程,而 React Native 框架中的组件同样具有这样的属性。
在组件生命周期的每个阶段,React Native 提供了多个生命周期函数,供开发者作为切入组件生命周期的钩子(hook),这样在对应的时间点程序就可以做对应的逻辑处理,从而实现相应的功能。
在 React Native 程序启动时,内部的虚拟 DOM 开始建立,生命周期就是建立在此虚拟 DOM 的整个生命周期之中,从虚拟 DOM 的初始化到虚拟 DOM 的卸载,React Native 为组件的不同状态建立了不同的生命周期。

3.6 React Native 中的生命周期

在图 3-4 中,可以看到在 React Native 虚拟 DOM 的几个大的阶段中,都有对应的生命周期函数存在。
截图
图 3-4 React Native 生命周期

1. 初始化阶段

此阶段进行组件的默认 props 和 state 的设定,可通过如下代码赋值。

1. static defaultProps = {  
2. autoPlay: false,  
3. maxLoop: 10,  
4. };  

2. 加载阶段

此阶段为组件开始实例化的阶段,比如当该组件开始被其他组件调用的时候。主要包含以下三个生命周期函数。

  • componentWillMount:组件将要开始加载,需要在组件开始加载前添加一些业务逻辑,那么就可以添加在此函数中。

  • render:组件开始根据 props 和 state 生成页面的 DOM,并在最后返回此 DOM。在此函数中不可以修改 props 和 state 的值,只可以读取,并且返回的 DOM 只能有一个顶层元素,比如说只能由一个 div 包裹所有的元素进行返回。

  • componentDidMount:组件已加载完毕,在 render 函数之后立即执行此函数。一般可以在这里进行网络请求,因为组件 UI 渲染好之后再进行网络请求,一般不会造成 UI 的错乱问题。在此生命周期函数中修改设置了 state 的值后,UI 会立即进行重新渲染,所以是一个通过加载网络数据更新 UI 的好时机。

    3. 更新阶段

    此阶段一般因为用户操作或者父组件有更新时,当组件因为 props 或 state 的变更导致组件重新渲染时,会经历此阶段。而在更新渲染的几个重要时机,React Native 提供了如下的生命周期函数供开发者执行对应的逻辑操作。
  • componentWillReceiveProps:当接收到新的 props 值更新时,会执行到此生命周期函数,此时可以将接收到的 props 值赋值给 state。

  • shouldComponentUpdate:在此生命周期中,可以通过逻辑判断新的 props 和 state 的变更需不需要引起组件的 UI 更新,默认是都会引起更新的,但是 React Native 提供了此生命周期供开发者自主决定是否需要更新。如果让此函数返回 True,那么组件将进行更新,如果返回 False,那么组件就不更新。此生命周期在优化 App 性能时非常重要,因为可以通过此生命周期函数拦截掉很多不必要的组件 UI 更新。

  • componentWillUpdate:如果上面的生命周期函数 shouldComponentUpdate 返回了 True,那么此生命周期函数将继续执行,表示组件即将进行更新操作。在更新操作前,还有时机进行相关的逻辑处理。但是从逻辑上你也应该明白,这里不可以再修改 state 的值,而只可以做一些进行更新前的其他准备工作。

  • componentDidUpdate:组件更新完毕之后执行的生命周期函数。此函数有两个参数 prevProps 和 prevState,分别为更新前的 props 与 state。这里可以进行一些新旧值的比较,如果发现值有变化可以进行一些网络请求、加载数据等操作。

    4. 卸载阶段

  • componentWillUnmount:此生命周期函数在组件被卸载和注销前执行,这里可以进行一些所谓的扫尾工作,如关闭掉之前的网络请求、一些不必要存储的清空、循环执行的定时器的清除等等。

至此,React Native 一个组件的完整生命周期执行完毕,你可以通过下面的代码体会 React Native 每个生命周期的执行过程。实际开发时只需要根据实际的项目需求在对应的生命周期函数中添加上自己的业务逻辑即可。

1. /** 
2. * 章节: 03-06 
3. * React Native 中的生命周期 
4. * FilePath: /03-06/lifecycle.js 
5. * @Parry 
6. */  
7. 
8. import React, { Component } from 'react';  
9. import { AppRegistry,View,Text } from 'react-native';  
10. 
11. export default class LifeCycle extends Component {  
12. 
13. constructor(props) {  
14. super(props);  
15. this.state = {  
16. name: "React"  
17. }  
18. }  
19. 
20. //组件即将加载  
21. componentWillMount() {  
22. console.log("componentWillMount");  
23. }  
24. 
25. //开始组件渲染  
26. render() {  
27. console.log("render");  
28. return (  
29. <View>  
30. <Text>  
31. {this.state.name}  
32. </Text>  
33. </View>  
34. );  
35. }  
36. 
37. //组件加载完毕后  
38. componentDidMount() {  
39. console.log("componentDidMount");  
40. }  
41. 
42. //组件接收到新的 props  
43. componentWillReceiveProps(nextProps) {  
44. console.log("componentWillReceiveProps");  
45. }  
46. 
47. //逻辑控制是否需要更新组件  
48. shouldComponentUpdate(nextProps, nextState) {  
49. console.log("shouldComponentUpdate");  
50. }  
51. 
52. //组件即将更新重新渲染  
53. componentWillUpdate(nextProps, nextState) {  
54. console.log("componentWillUpdate");  
55. }  
56. 
57. //组件重新渲染后  
58. componentDidUpdate(prevProps, prevState) {  
59. console.log("componentDidUpdate");  
60. }  
61. 
62. //组件卸载注销前  
63. componentWillUnmount() {  
64. console.log("componentWillUnmount");  
65. }  
66. }  
67. 
68. AppRegistry.registerComponent('LifeCycle', () => Main);  

3.7 本章小结

本章如同修炼武功中必备的内功一样,看起来和使用 React Native 框架的关系不大,而且底层原理的部分理解起来还有点晦涩难懂。不过,如果你想成为一个精通 React Native 框架的开发者,而不仅仅是一个使用者的话,这部分的内容是非常重要的,而且在后期你遇到此框架的难题时,你可以快速地根据这部分底层原理性的知识快速定位到问题所在。其他软件开发语言的学习原则也是如此,希望能对你有所有启发。


作者:Parry
出处:http://www.cnblogs.com/parry/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章
|
2月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
21天前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
30 1
|
23天前
|
开发框架 前端开发 JavaScript
移动应用开发中的跨平台策略:Flutter与React Native的比较
在移动应用领域,跨平台解决方案已成为开发者追求高效、成本效益和广泛覆盖的关键。本文深入探讨了两种领先的跨平台框架——Flutter和React Native,从技术架构、性能、社区生态及实际应用案例四个维度进行全面对比分析。通过这一比较,旨在为移动应用开发者提供选择合适框架的参考依据,帮助他们根据项目需求做出明智的决策。
|
2月前
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐,适合快速开发简单应用。React Native基于React,拥有活跃社区和优秀性能,适合复杂应用。React Native在性能上略胜一筹,尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
|
8天前
|
前端开发
React生命周期
React生命周期
9 0
|
1月前
|
前端开发 iOS开发 Android开发
React Native跨平台开发实战:从零到一
学习React Native跨平台开发,首先安装Node.js和React Native CLI,设置Android/iOS环境。使用CLI创建项目,如`npx react-native init MyProject`。运行应用:`npx react-native run-android`或`run-ios`。编写组件,如在App.js中创建Hello World。添加样式,安装第三方库如react-native-vector-icons,使用react-navigation进行路由和导航。
27 2
|
2月前
|
前端开发 JavaScript 开发者
在React中,如何利用生命周期方法管理组件的状态和行为?
【5月更文挑战第29天】在React中,如何利用生命周期方法管理组件的状态和行为?
26 3
|
12天前
|
Dart 前端开发 JavaScript
探索移动应用开发中的跨平台解决方案:Flutter与React Native的比较
在移动应用开发领域,选择合适的跨平台解决方案是关键。本文将深入分析Flutter和React Native这两大主流框架,从性能、开发效率、社区支持等方面进行比较,帮助开发者做出明智的选择。
22 0
|
2月前
|
前端开发 JavaScript 调度
React的生命周期是什么
【5月更文挑战第29天】React的生命周期是什么
22 1
|
2月前
|
前端开发 JavaScript Android开发
使用React Native开发跨平台移动应用的技术详解
【5月更文挑战第22天】本文详述了使用React Native开发跨平台移动应用的技术,该框架由Facebook推出,基于JavaScript,支持iOS和Android。React Native通过JNI/JSI实现JavaScript到原生代码的转换,提供高效性能和原生体验。其优势包括跨平台性、原生体验、开发速度及社区支持。开发流程涉及环境搭建、项目创建、编码、调试与测试,以及构建与发布。注意事项包括性能优化、平台适配、利用第三方库和持续学习。React Native为开发者构建高质量跨平台应用提供了便捷途径,未来潜力无限。