[书籍精读]《React Native精解与实战》精读笔记分享

写在前面

• 书籍介绍：本书由架构师撰写，包含ReactNative框架底层原理，以及与iOS、Android混合开发案例，精选了大量实例代码，方便读者快速学习。主要内容分为两大部分，第1部分“入门”包括第1_{9章，介绍ReactNative框架的基本原理与使用方法；第2部分“进阶”包括第10}15章，介绍ReactNative框架的高阶开发与App部署相关知识。附录部分剖析了ReactNative的源码，可帮助读者研究ReactNative底层本质，还分享了一些ReactNative框架学习的相关资源。
• 个人简评：我是去年年末才开始学习使用React和React Native进行开发的，以前用的都是Vue的技术栈。这本书给个人感觉就是逻辑清晰，通俗易懂，从基础入门到原理进阶，一一道来。但我想若是做者能再附带一个完整的项目实战可能效果更好，不过做者ParryQiu本人也写过不少技术教程以及录制了几套视频教程，有兴趣的能够去他我的的技术博客看看。
• ！！福利：文末有pdf书籍、笔记思惟导图、随书代码打包下载地址。以为有用，记得点赞或收藏哦！
  

1.React Native简介

React简介

• 最先孵化于Facebook内部
• Jordan Walke是框架的创始人
• 底层核心是Virtual DOM

React Native简介

• 在React框架的基础之上
• 底层经过对IOS平台和Android平台原生代码的封装与调用
• JavaScript Core底层

React Native学前知识

• HTML5的基础知识
• CSS布局的基本知识
• JavaScript的基础知识
• Ios和Android两个平台的App打包、部署与上线
• Node.js以及npm包管理的知识

2.开发环境配置

• 安装nodejs
• 安装React Native
• 编辑器Vscode

推荐插件

• React Native Tools
• react-beautify

3.React Native工做原理与生命周期

3.1.框架工做原理

• JSX源码经过React Native框架编译后，经过对应平台的Bridge实现了与原生框架的通讯
• UI层变动就映射为虚拟DOM后调用diff算法计算出变更后的JSON映射文件，最终由Native层将此JSON文件映射渲染到原生App的页面元素上，实现了项目中只需控制state以及props的变动来引发IOS与Android平台的UI变动

3.2.与原平生台通讯

• 与原生框架通讯中，采用了JavaScriptCore做为JS VM，中间经过JSON文件与Bridge进行通讯
• Chrome浏览器进行调试，那么全部的JavaScript代码都将运行在Chrome的V8引擎中，与原生代码经过WebSocket进行通讯

3.3.组件间通讯

• 父子组件通讯：props
• 子父组件通讯：传入函数
• 多级组件之间的通讯：context对象或global等方式
• 无直接关系组件间通讯：AsyncStorage或JSON文件，EventEmitter/EventTarget/EventDispatcher继承或实现的接口，Signals模式，Publish/Suubscribe广播形式

3.4.React Native生命周期

• 初始化阶段：constructor
• 加载阶段：componentWillMount、render、componentDidMount
• 更新阶段：componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate
• 卸载阶段：componentWillUnmount

4.React Native页面布局

4.1.CSS3

• 选择器、2D/3D转换、盒子模型、动画、背景和边框、多列布局、文字特效、用户界面
• 引入新的模块：Flex布局，通俗称为弹性盒模型。为了更加有效的去布局、对其元素

4.2.Flex弹性盒模型

• 元素以两个坐标方向进行布局，分别称为主轴和交叉轴
• 元素都存在于Flex容器中
• 以Flex Container的起始与结束做为坐标的起始与结束点
• 能够自动伸缩，默承认以填充剩余的空间

4.3.Flex详解

• justify-content
• align-items
• align-self
• flex-direction
• flex-basis
• flex-wrap
• align-content
• flex-grow
• flex-shrink
• order
• flex-flow
• flex

4.4.React Native中Flex

• 由于在React Native框架中直接使用JavaScript来实现属性的定义，因此全部属性都按照React Native中定义的写法来写，只是属性名称部分有链接符的，在React Native中变成了驼峰拼写的形式，而且某些属性的默认值进行了变动，可是本质的原理与做用是不变的

5.React Native开发调试技巧与工具

5.2.经常使用调试属性（开发者菜单）

• 从新加载刷新应用
• 启动实时从新加载刷新
• 启用调试跟踪
• 启用热加载
• 显示审查元素工具
• 显示性能监控工具

5.3.Chrome中远程调试

• 在 React Native 开发调试时，打开模拟器或真机设备上的开发者菜单，选择“ Debug JS Remotely ”后，本地的 Chrome 浏览器会自动打开一个 tab，URL 地址
  为 http://localhost:8081/debugger-ui

5.4.React Developer Tools工具

• 树形结构查看
• 源码搜索
• 边栏工具

6.React Native组件详解

6.1.组件简介

• 提供一系列的内置组件供开发者使用
• 依托开源社区强大的生态系统，更有无穷无尽的开发组件可供使用

6.2.视图组件View

• 用于布局的基础组件是View组件，其余全部的组件均可以布局在View组件中，相似网页布局中的div
• 支持Flex CSS属性，还支持React Native中的样式、一些触摸事件以及一些可访问性的属性设置
• View组件对应iOS平台的UIView，Android平台的Android.view以及HTML中的div

6.3.底部导航组件TabBar

• iOS平台下的TabBarIOS
• Android平台没有官方提供的TabBar组件，推荐使用开源组件react-native-tab-navigator

6.4.页面跳转组件

• iOS平台下的NavigatorIOS
• Android没有官方的页面导航组件，推荐使用react-native-navigation

6.5.图片组件Image

• 提供多种方式加载图片资源，如加载网络图片、静态资源、本地图片、或读取用户相册中的图片
• Android平台下还能够支持GIF和WebP图片格式，iOS平台上支持psd
• 在iOS平台下，加载的资源必须是HTTPS协议资源

6.6.文本组件Text

• React Native中不能够直接将文字放置在View组件之下
• 能够进行文字的嵌套处理
• React Native没有直接定义元素级别样式的能力，因此不能让全部的Text等组件直接经过继承的方式获取到统一的样式定义

6.7.输入框组件TextInput

• 提供了接受用户经过键盘输入字符的功能，并能够经过后期的配置实现如自动纠错、自动大写、提示文字以及显示不一样的键盘类型如邮件、数字等功能

6.8.触摸处理类组件TouchableHighlight

• 在组件被点击时使用自定义的背景颜色进行高亮显示，以便在某些使用场景下让用户更能明确地感应到对应的操做
• 但只能包裹在一个层级的子元素上，若是有多个，那么就须要使用一个View组件将全部的元素包裹起来，再放置在TouchableHighlight组件下

6.9.网页WebView组件

• App中有些页面组件是常常变更的，如用户帮助等，或者加载一个别人提供的页面

6.10.滚动视图组件ScrollView

• ScrollView在指定了固定的高度以后便可以工做，用于生成一个可滚动的视图
• 但它会一次将全部的子元素渲染出来，数据量多的时候渲染效率确定比较低下
• React Native提供另外一个组件FlatList用于改进这个组件的性能问题，会进行延迟渲染

7.React Native API详解

7.1.API简介

• React Native不只为开发人员提供了大量用于App开发布局的组件，还提供了用于供开发人员调用的更加接近原生组件与功能的模块

7.2.提示框Alert

• 用于提示用户的信息弹出框
• 若是在弹出提示框的同时须要用户输入一些信息，那么在iOS平台下就须要调用AlertIOS API

7.3.App运行状态AppState

• 经过AppState能够获取到当前App是在前台运行仍是在后台运行
• AppState共有三种状态：active（正在前台运行），background（在后台运行），inactive（先后台切换的一个短暂状态）

7.4.异步存储AsyncStorage

• 为开发者提供了一个异步的、未加密、持久的、全局的键值对（key-Value）存储模块，如同HTML5中的LocalStorage
• IOS平台会使用原生代码将AsyncStorage中的小数据存储于序列化的字典数据结构中，而将大数据存储在单独的文件中
• Android平台会将AsyncStorage存储于RocksDB或SQLite中，取决于哪个模块是可用的
• AsyncStorage是明文存储的。因此在iOS系统下，推荐将用户敏感信息存储在iOS的Keychain中，而在Android下，须要将用户敏感信息存储在SharedPreferences
• iOS已有组件react-native-keychain，Android有react-native-sensitive-info组件

7.5.相机与相册API

• React Native框架中，API提供了CameraRoll供用户访问本地相册的功能，而在iOS系统中使用此功能时，还须要先连接RCTCameraRoll库
• 在App的开发过程当中，通常在为用户提供读取相册的功能时，还应该给用户提供一个直接相机拍照的功能。因此在开发过程当中会直接使用集成了读取相册以及使用相机拍照二合一的功能组件
• 开源组件React Native Image Picker提供了使用原生UI从设备相册中选取图片或者视频的功能，或者直接使用相机进行拍摄读取

7.6.地理位置信息Geolocation

• 为App提供获取定位坐标的功能

7.7.设备网络信息NetInfo

• 获取App当前网络状态的功能API
• 使用场景：经过网络的不一样状态加载不一样的资源，以便提升用户加载资源的速度，或者保存网络状态以便判断用户使用场景的变化
• iOS系统设备状态：none、wifi、cell、unknown

8.React Native 网络请求详解

8.1.Restful API简介

• REST指的是一组架构约束条件和原则

8.2.React Native中的网络请求

• 提供了Fetch API做为网络请求之用
• 如今产生的Fetch框架就是为了提供更增强大、高效的网络请求而生额。在Chrome浏览器中已经支持了Fetch函数
• Fetch支持了大部分经常使用的HTTP的请求并和HTTP标准兼容

8.3.ListView组件

• 在经过Fetch API获取数据后，通常会使用React Native中的ListView组件进行数据的绑定操做

9.经常使用React Native开源组件详解

9.1.React Native热门资源列表

• github地址：awesome-react-native

9.2.React Native接入微博、微信、QQ登陆

• 使用的组件是react-native-open-share

9.3.更加美观的组件库

• react-virgin

9.4.React Native 图表

• react-native-pathjs-charts，基于react-native-svg与paths-js

9.5.react-native-gifted-listview

• 提供了iOS平台下的下拉刷新与Android平台下的点击刷新，以及列表底部加载更多组件功能。还提供了加载进度条、列表无数据时的默认视图、列表页头标题等功能

9.6.react-native-vector-icons

• 提供了几千个图标，并且这些图标都是开源的

10.React Native运行原理与部署调试

10.1.React Native运行原理

• 框架运行起来所依赖的几大组成部分：硬件设备或者模拟器，用于运行原生代码；Node.js服务端，也就是React Native Packger，负责源码的打包工做；Google Chrome，能够提供中间态的调试工具；后台的React Native JavaScript代码；
• React Native Packger实现原理：当咱们在启动iOS或Android项目时，React Native框架会自动启动React Native Packager控制台来进行监听和打包，而手动启动的方法为在项目文件夹下运行命令npm start便可

10.2.iOS平台部署于调试

• 运行App到模拟器上：react-native run-ios --simulator="iPhone X"
• 运行App到真机上：一、链接真机设备；二、配置代码签名；三、启用iOS应用的ATS（App Transport Security）；四、配置发布模式；五、将资源文件静态化打包；六、编译发布运行；

10.3.Android平台部署与调试

• 链接Android设备
• Android离线JavaScript资源的打包
• 在真机上运行App
• Gradle：基于Apache Ant和Apache Maven概念的项目自动化工具。特色：自动处理包相依关系-取自Maven Repos的概念；自动处理部署问题-取自Ant的概念；条件判断写法直觉-使用Groovy语言；

10.4.Android模拟器介绍

• Android Studio下自带Android模拟器
• 另外一款模拟器Genymition能够模拟3000+的Android设备

11.IOS开发与React Native混合开发

11.1.iOS平台混合开发简介

• 有时React Native框架尚未提供对应的JavaScript Api，就须要本身编写React Native框架与iOS平台结合的混合开发代码，使得React Native框架能够直接与iOS平台的原生代码进行通讯

11.2.iOS平台混合开发原理详解

• 实现过程：1.在iOS平台的原生代码中定义混合开发的入口，用于与React Native中的JavaScript代码进行通讯；2.设置iOS平台下项目的编译必备设置；3.在React Native项目中经过JavaScript代码调用混合开发实现的iOS平台原生功能；
• 开发特性：参数类型；回调函数；Promise；多线程；依赖注入；导出常量；枚举常量；发送事件到JavaScript；优化无监听处理的事件；Swift的实现方法；

12.Android平台与React Native混合开发

12.1.Android平台混合开发简介

• 混合开发能够利用现有的Android原平生台的代码，并能够用于开发一些需求高性能、多线程的应用场景

12.2.Android平台混合开发原理详解

• 开发步骤：1.在Android项目中经过原生代码实现提供给React Native调用的原生功能；2.在Android项目中将编写好的功能模块进行注册；3.定义功能模块的Android包；4.在React Native项目中经过JavaScript代码调用混合开发实现的Android平台原生功能；
• 开发特性：回调；Promise；发送事件到JavaScript；从StartActivityForResult中获取结果；监听生命周期事件；

13.React Native消息推送

13.1.iOS平台消息推送机制

• 全部的iOS设备的消息推送都会通过Apple的消息推送服务器Apple Push Notification service（APNs），全部的推送消息由此服务器进行消息的下发
• 向APNs发送请求的服务器须要配置Apple开发者帐号下的证书
• APNs发现目标设备离线后，会先将请求的消息存储起来，等设备上线后再进行消息的推送
• iOS平台的原生消息推送设置很是复杂，须要手动设置消息推送的开发者帐号证书、推送消息请求的服务器证书、环境、编写以及APNs交互的代码
• iOS平台第三方消息推送框架会将开发的流程简单化，咱们只须要与极光平台经过JPush API进行通讯，JPush API提供了APNs Sender与Apple APNs Server进行通讯，后续APNs与设备的通讯与原生消息推送通讯的过程一致，由APNs负责便可，前部分由极光平台代理
• JPush还提供了应用内消息推送部分，即App启动时，内嵌的JPush SDK会开启长链接到JPush Server，从而JPush Server 能够推送消息到App里

13.2.Android平台消息推送机制

• Android环境下的消息推送方案：轮询（Pull）方式；长链接（Push）方式；使用XMPP、MQTT实现消息推送；
• 综合考虑，使用长链接（Push）方式在实现简易度以及资源损耗方面能够找到一个比较好的平衡点
• Android平台第三方经过开发者集成JPush Android SDK到其应用中，JPush Android SDK建立到JPush Cloud的长链接，为App提供永远在线的能力，当推送消息到达App时，只须要调用JPush API推送便可

13.3.React Native极光推送实战

• jpush-react-native
• 须要注意Android的应用包名与iOS App的Bundle ID最好保持一致

14.IOS、Android平台发布与热更新

14.2.快速生成平台App图标与启动图的方法

• Ape Tools
• makeappicon.com

14.3.iOS打包上架

• 须要使用XCode进行打包，打包后的App能够直接经过XCode提交到App Store供Apple审核

14.4.Android打包上架

• App打包开放得多，经过Android Studio工具打包后能够直接生成单独的、可任意复制分发的Apk文件，用户只须要下载apk文件便可在本身的真机上安装

14.5.ReactNative热更新

• 用户能够在不更新App的状况下进行App的热更新，甚至支持增量热更新，服务器只须要给用户下发新增的代码与资源文件，React Native框架会自动进行JS Bundle文件的合并，App在从新加载了JS Bundle后，App的功能和内容也进行了更新 16
• React Native框架会将咱们开发的全部JavaScript代码，包括React Native框架代码、第三方组件代码、业务逻辑代码、图片等资源都打包在一个JS Bundle文件中，React Native App运行时会加载这个JS Bundle文件
• CodePush是微软推出的用于Cordova框架与React Native框架App热更新的框架，咱们能够直接经过调用CodePush的SDK来快速、稳定的实现App的热更新功能
• 咱们经过CodePush的CLI将更新的代码包以及相关资源文件按照CodePush的格式打包后提交到CodePush云平台，用户的设备会请求CodePush的服务器询问是否有文件更新

15.React Native 性能调试方法与技巧

15.1.性能调优基准参数

• RAM 内存占用
• JSC JavaScript堆内存占用
• Views 当前屏幕中全部的view数量
• UI FPS(帧率)
• JS JavaScript帧率

15.2.常见形成App性能低下的缘由

• 1.console.log语句
• 2.Navigator性能问题
• 3.Touchable类组件使用问题
• 4.改变图片大小致使掉帧问题
• 5.改变视图时致使丢帧问题
• 6.ListView组件性能问题
• 7.在重绘一个没有改变的视图JS的FPS忽然降低
• 8.JavaScript线程繁忙时致使JS线程掉帧

15.3.查找性能问题以及调优方法

• XCode的性能测试工具Instruments
• Android原生的性能统计工具systrace

15.4.性能优化方法与组件

• 1.性能优化原则：最核心就是尽可能减小经过bridge的通讯内容
• 2.使用特定平台组件：使用特定平台的组件开发特定平台的功能，如NavigatorIOS、TabBarIOS等
• 3.高性能第三方组件：react-native-fast-image；react-native-largelist；react-native-display；react-native-swipeview；react-native-interactable；
• 4.资源优化：React Native最终会将全部的资源文件打包成一个Bundle文件；控制Bundle的尺寸大小；除tab图标外其余的图片资源文件能够经过网络加载的方式进行加载，或者从图片CDN上加载；Bundle文件还能够进行拆分，让资源文件按需加载；

写在后面

• pdf书籍、笔记思惟导图、随书代码打包下载地址：https://pan.baidu.com/s/1ZJz711DrCfGRkqdlkx_HZg(提取码：b4yg)
• 纸质书京东购买地址：https://u.jd.com/OuBeOf（推荐使用纸质书来学习）
• 为了方便在手机上查看，后面我会把这些笔记陆续发布到公众号“派三派四”，能够扫码关注一下，欢迎关注。