《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月前
|
前端开发 JavaScript
React 组件生命周期
React 组件生命周期
30 0
|
1月前
|
移动开发 前端开发 JavaScript
React 表单验证实战
【10月更文挑战第25天】本文介绍了 React 表单验证的常见方法,包括原生 HTML5 验证、自定义验证逻辑和第三方库(如 Formik 和 Yup)的使用。通过具体代码示例,详细讲解了每种方法的实现步骤,并探讨了常见问题和易错点及其解决方法。旨在帮助开发者提高表单验证的有效性和安全性。
72 8
|
1月前
|
前端开发 JavaScript
react 组件的生命周期
React组件的生命周期包括从创建到销毁的各个阶段,如挂载(mounting)、更新(updating)和卸载(unmounting)。每个阶段都有特定的方法,用于控制组件的行为和状态,确保高效、有序地渲染和管理UI。
|
21天前
|
前端开发 JavaScript API
React Native实战:构建跨平台移动应用
React Native实战:构建跨平台移动应用
23 0
|
2月前
|
前端开发 数据安全/隐私保护
前端技术实战:React Hooks 实现表单验证
【10月更文挑战第1天】前端技术实战:React Hooks 实现表单验证
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
61 10
React技术栈-react使用的Ajax请求库实战案例
|
3月前
|
前端开发 JavaScript 开发者
介绍一下React生命周期
介绍一下React生命周期
107 9
|
2月前
|
存储 前端开发 JavaScript
深入理解React组件的生命周期与Hooks
【10月更文挑战第7天】深入理解React组件的生命周期与Hooks
117 0
|
3月前
|
前端开发 API UED
React组件生命周期详解
【9月更文挑战第4天】在React应用开发中,掌握组件生命周期对于管理状态和属性至关重要,并能有效提升应用性能。本文详细介绍了React组件生命周期的三个阶段:挂载、更新和卸载,并通过代码示例展示了如何避免状态更新导致的死循环及优化网络请求等问题,帮助开发者构建更高效、可维护的应用。
90 2
|
4月前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
56 0