本章将深入讲解 React的底层原理，万丈高楼平地起，非常深入地理解 React底层的实现，在你开发或遇到难题调试时非常有帮助 。
此部分包含 React的框架构成、工作原理、UI 层的渲染与重绘以及组件间通信、React与各个平台的通信实现以及 React中的生命周期 。
如果需要直接开始 React的开发与实战，请直接跳至第四章开始学习 。
3.1 React框架构成
React框架内部已提供了很多的内置组件，如图 3-1 所示 。如 View、Text 等基本组件，用于一些功能布局的 、 等，用于列表展示的各种 List 组件和对应 iOS 平台与平台的特定组件、API 等 。同时也提供了供编写与原生平台交互的接口，在后续的章节我们会进行与原生平台的混合实战开发实战 。
文章插图
图 3-1 React框架构成
3.2 React工作原理
在 React 框架介绍的章节，我们理解了如何将代码渲染至虚拟 DOM 并更新到真实 DOM 的过程 。在 React框架中，渲染到 iOS 平台与平台的过程如图 3-2 所示 。
文章插图
图 3-2 React渲染
在 React 框架中，JSX 源码通过 React 框架最终渲染到了浏览器的真实 DOM 中，而在 React框架中，JSX 源码通过 React框架编译后，通过对应平台的实现了与原生框架的通信 。如果我们在程序中调用了 React提供的 API，那么 React框架就通过调用原生框架中的方法 。
因为 React的底层为 React 框架，所以如果是 UI 层的变更，那么就映射为虚拟 DOM 后进行 diff 算法，diff 算法计算出变动后的 JSON 映射文件，最终由层将此 JSON 文件映射渲染到原生 App 的页面元素上，最终实现了在项目中只需要控制 state 以及 props 的变更来引起 iOS 与平台的 UI 变更 。
编写的 React 代码最终会打包生成一个 main..js 文件供 App 加载，此文件可以在 App 设备本地，也可以存放于服务器上供 App 下载更新，后续章节讲解的热更新就会涉及到 main..js 位置的设置问题 。
3.3 React与原生平台通信
在与原生框架通信中，如图 3-3 所示，React采用了作为 JS VM，中间通过 JSON 文件与进行通信 。而如果在使用浏览器进行调试时，那么所有的代码都将运行在的 V8 引擎中，与原生代码通过进行通信 。
文章插图
图 3-3 React与原生平台的通信
关于 React框架与原生平台的通信原理的详细介绍，后续的混合开发章节将会有详细的讲解与实战开发 。
3.4 组件间通信
React开发最基本的元素就是组件，React与 React 一样，也会涉及到组件之间的通信，用于数据在组件之间的传递，下面列出了几种常用的组件间通信的方式 。
父子组件的通信
如同之前的章节介绍 React 组件间传递参数一样，在 React中，父组件向子组件传递值，可以通过 props 的形式 。
【《React Native 精解与实战》书籍连载「React Native 底层】在下例中，父组件通过调用子组件并赋值子组件的 name 为 React，子组件通过 this.props.name 获取父组件传递过来的 name 的字符串值 React 。
完整代码在本书配套源码的 03-04 文件夹 。
/*** 章节: 03-04* 父子组件通信，在父组件中调用子组件* FilePath: /03-04/parent-2-child.js* @Parry*//*** 章节: 03-04* 子组件实现，通过 props 获取父页面传递的值* FilePath: /03-04/parent-2-child.js* @Parry*/class ChildComponent extends Component {render() {return (Hello {this.props.name}!);}}
- 前端使用puppeteer 爬虫生成《React.js 小书》PDF并合并
- [架构之路-183]-《软考-系统分析师》-13-系统设计
- 包邮送书 《人工智能算法图解》书籍分享
- 《Qt5学习笔记1》安装Qt5并配置环境变量
- 精品微信小程序ssm的健身打卡预约小助手网站vuejs
- 特战英雄榜是什么电视
- 二 Django入门
- 勇士的黎明,《勇士的黎明》怎么加点？
- GD32 《嵌入式 - RISC-V开发笔记》 第2章 初识GPIO流水灯
- 【C语言】三剑客之《C陷井与缺陷》完整笔记