《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


本章将深入讲解 React Native 的底层原理,万丈高楼平地起,非常深入地理解 React Native 底层的实现,在你开发或遇到难题调试时非常有帮助。
此部分包含 React Native 的框架构成、工作原理、UI 层的渲染与重绘以及组件间通信、React Native 与各个平台的通信实现以及 React Native 中的生命周期。
如果需要直接开始 React Native 的开发与实战,请直接跳至第四章开始学习。

3.1 React Native 框架构成

React Native 框架内部已提供了很多的内置组件,如图 3-1 所示。如 View、Text 等基本组件,用于一些功能布局的 Button、Picker 等,用于列表展示的各种 List 组件和对应 iOS 平台与 Android 平台的特定组件、API 等。同时也提供了供编写与原生平台交互的接口,在后续的章节我们会进行与原生平台的混合实战开发实战。
截图
图 3-1 React Native 框架构成

3.2 React Native 工作原理

在 React 框架介绍的章节,我们理解了如何将代码渲染至虚拟 DOM 并更新到真实 DOM 的过程。在 React Native 框架中,渲染到 iOS 平台与 Android 平台的过程如图 3-2 所示。
截图
图 3-2 React Native 渲染
在 React 框架中,JSX 源码通过 React 框架最终渲染到了浏览器的真实 DOM 中,而在 React Native 框架中,JSX 源码通过 React Native 框架编译后,通过对应平台的 Bridge 实现了与原生框架的通信。如果我们在程序中调用了 React Native 提供的 API,那么 React Native 框架就通过 Bridge 调用原生框架中的方法。
因为 React Native 的底层为 React 框架,所以如果是 UI 层的变更,那么就映射为虚拟 DOM 后进行 diff 算法,diff 算法计算出变动后的 JSON 映射文件,最终由 Native 层将此 JSON 文件映射渲染到原生 App 的页面元素上,最终实现了在项目中只需要控制 state 以及 props 的变更来引起 iOS 与 Android 平台的 UI 变更。
编写的 React Native代码最终会打包生成一个 main.bundle.js 文件供 App 加载,此文件可以在 App 设备本地,也可以存放于服务器上供 App 下载更新,后续章节讲解的热更新就会涉及到 main.bundle.js 位置的设置问题。

3.3 React Native 与原生平台通信

在与原生框架通信中,如图 3-3 所示,React Native 采用了 JavaScriptCore 作为 JS VM,中间通过 JSON 文件与 Bridge 进行通信。而如果在使用 Chrome 浏览器进行调试时,那么所有的 JavaScript 代码都将运行在 Chrome 的 V8 引擎中,与原生代码通过 WebSocket 进行通信。
截图
图 3-3 React Native 与原生平台的通信
关于 React Native 框架与原生平台的通信原理的详细介绍,后续的混合开发章节将会有详细的讲解与实战开发。

3.4 组件间通信

React Native 开发最基本的元素就是组件,React Native 与 React 一样,也会涉及到组件之间的通信,用于数据在组件之间的传递,下面列出了几种常用的组件间通信的方式。

父子组件的通信

如同之前的章节介绍 React 组件间传递参数一样,在 React Native 中,父组件向子组件传递值,可以通过 props 的形式。
在下例中,父组件通过调用子组件并赋值子组件的 name 为 React,子组件通过 this.props.name 获取父组件传递过来的 name 的字符串值 React。
完整代码在本书配套源码的 03-04 文件夹。

/**
* 章节: 03-04
* 父子组件通信,在父组件中调用子组件
* FilePath: /03-04/parent-2-child.js
* @Parry
*/

<ChildComponent name='React'/>

/**
* 章节: 03-04
* 子组件实现,通过 props 获取父页面传递的值
* FilePath: /03-04/parent-2-child.js
* @Parry
*/

class ChildComponent extends Component {
    render() {
        return (
          <Text>Hello {this.props.name}!</Text>
        );
    }
}

子父组件的通信

在开发过程中,不仅有父子之间的通信,有时还会有子组件向父组件通信传递值的需求,比如当子组件的某个值变更后,需要通知到父组件做相应的变更与响应,那么就会需要子父组件之间的通信。
示例代码如下,在父组件的定义中,在调用子组件时,同样向子组件传递了一个参数,不过这个参数是一个函数,此函数用于接收后续子组件向父组件传递过来的数据,与之前父组件向子组件传递数据不太一样。
完整代码在本书配套源码的 03-04 文件夹。

/**
* 章节: 03-04
* 子父组件通信,父组件的实现
* FilePath: /03-04/child-2-parent.js
* @Parry
*/
import React, {Component} from 'react';
import ChildComponent from './ChildComponent'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'React'
    }
  }

  //传递到子组件的参数,不过参数是一个函数。
  handleChangeName(nickName) {
    this.setState({name: nickName})
  }

  render() {
    return (
      <div>
        <p>父组件的 name:{this.state.name}</p>
        <ChildComponent
          onChange={(val) => {
          this.handleChangeName(val)
        }}/>
      </div>
    );
  }
}

export default App;

下面为子组件的定义,子组件在页面中定义了一个按钮,点击此按钮后,调用自身的一个函数 handleChange,修改了自身 state 中的值 name 为 nickName 定义的值 Parry,那么此子组件的页面上的字符串将由之前的 Hello React! 变为 Hello Parry!,同时使用了 this.props.changeName,也就是父组件调用时传递过来的函数,向父组件传递了 nickName 的值 Parry。
父组件在接收到子组件的调用后,调用了父组件自身的函数 handleChangeName 修改了自身的 state 中的 name 的值为 Parry,也就是子组件传递过来的 Parry,所以同时,父组件的页面上的值也同时由之前的 React 变更成了 Parry。

/**
* 章节: 03-04
* 子父组件通信,子组件的实现
* FilePath: /03-04/child-2-parent.js
* @Parry
*/

import React, {Component} from 'react'

export default class ChildComponent extends Component {
  constructor(props) {
    super(props)

    this.state = {
      name: 'React'
    }
  }

  handleChange() {
    const nickName = 'Parry';
    this.setState({name: nickName})
    //调用父组件传递过来的函数参数,传递值到父组件去。
    this
      .props
      .changeName(nickName)
  }

  render() {
    const {name} = this.state;
    return (
      <div>
        <p>Hello {name}!</p>
        <Button
          onPress={this
          .handleChange
          .bind(this)}
          title="修改一下 name 为 Parry"/>
      </div>
    )
  }
}

多级组件之间的通信

如果组件之间的父子层级非常多,需要进行组件之间的传递,这时候当然可以通过上面介绍的方法进行一级一级的传递,但是当这种组件间层级很深的时候,这样的传递方法不是一个太好的方法。
解决的方法是首先要在设计 App 时,需要注意不能让组件之间的层级关系太深,一是为了避免组件之间通信的冗长,还有一个原因是太深的嵌套逻辑,用户体验上也不会很好,可以想象一下用户从最底层一层层操作返回到最顶层时的体验。
第二就是可以使用如 context 对象或 global 等方式进行多级组件间的通信,但是这种方式不推荐。

无直接关系组件间通信

前面提到的都是有层级关系的组件间的通信方式,而如果组件间没有层级的关系的话,可以通过如 AsyncStorage 或 JSON 文件等方式进行无直接关系组件间的通信。
当然,还可以使用 EventEmitter / EventTarget / EventDispatcher继承或实现接口的方式、Signals 模式或 Publish / Subscribe 的广播形式,都可以达到无直接关系组件间的通信。
这些组件间的通信方式使得组件之间的数据可以传递起来,后续的实战章节会有详细的代码实现,这里主要进行了理论部分的介绍。掌握这部分知识后才可以将 App 开发中的基本单位,也就是组件串联起来。


截图


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

相关文章
|
2月前
|
前端开发 API 数据库
React Server Components 实战:解锁高效渲染新姿势
React Server Components 实战:解锁高效渲染新姿势
157 81
|
3月前
|
缓存 前端开发 安全
解锁下一代 React:Server Components 实战指南
解锁下一代 React:Server Components 实战指南
152 84
|
3月前
|
前端开发
React Hooks数据获取:避免内存泄漏的实战指南
React Hooks数据获取:避免内存泄漏的实战指南
|
18天前
|
人工智能 自然语言处理 前端开发
让AI学会"边做边想":ReAct的实战指南
还在为AI的「知其然不知其所以然」而烦恼?ReAct技术让AI不仅会思考,更会行动!通过模拟人类的思考-行动-观察循环,让AI从书呆子变身为真正的问题解决专家。几行代码就能构建智能Agent,告别AI幻觉,拥抱可追溯的推理过程!
|
6月前
|
前端开发
React 中高阶组件的原理是什么?
React 中高阶组件的原理是什么?
179 57
|
6月前
|
前端开发 数据可视化 测试技术
React音频播放列表组件开发实战:常见问题与避坑指南
本文介绍了构建React音频播放列表组件的核心架构与常见问题解决方案。通过管理播放状态、列表索引和音频进度,结合异步控制、状态清理、节流优化等技术,确保流畅的用户体验。针对移动端兼容性、内存泄漏、列表渲染性能等问题提供了具体修复方案,并分享了自定义Hook封装、可视化音频波形等进阶实践。最后,总结了性能优化法则和测试关键点,帮助开发者打造生产级可靠的音频播放组件。
161 18
|
6月前
|
Web App开发 移动开发 前端开发
React 视频播放器样式自定义实战指南
本文详细介绍了如何在React项目中实现视频播放器的样式自定义,涵盖HTML5 `&lt;video&gt;`标签的基础知识、CSS样式定制技巧及常见问题解决方案。针对全屏模式样式失效、移动端触摸事件冲突和进度条样式定制等问题提供了具体代码示例。同时,探讨了视频预加载策略和内存优化方法,并推荐了几款调试工具,帮助开发者提升用户体验和应用性能。
179 6
|
11月前
|
前端开发 数据管理 编译器
引领前端未来:React 19的重大更新与实战指南🚀
React 19 即将发布,带来一系列革命性的新功能,旨在简化开发过程并显著提升性能。本文介绍了 React 19 的核心功能,如自动优化重新渲染的 React 编译器、加速初始加载的服务器组件、简化表单处理的 Actions、无缝集成的 Web 组件,以及文档元数据的直接管理。这些新功能通过自动化、优化和增强用户体验,帮助开发者构建更高效的 Web 应用程序。
489 1
引领前端未来:React 19的重大更新与实战指南🚀
|
10月前
|
移动开发 前端开发 JavaScript
React 表单验证实战
【10月更文挑战第25天】本文介绍了 React 表单验证的常见方法,包括原生 HTML5 验证、自定义验证逻辑和第三方库(如 Formik 和 Yup)的使用。通过具体代码示例,详细讲解了每种方法的实现步骤,并探讨了常见问题和易错点及其解决方法。旨在帮助开发者提高表单验证的有效性和安全性。
223 8
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
129 10
React技术栈-react使用的Ajax请求库实战案例