开启RN学习之旅 （一） —— 基本了解
版本记录
| 版本号 | 时间 |
|---|---|
| V1.0 | 2018.01.25 |
前言
RN一直用的很火，包括Facebook、AirBub还有特斯拉等很多公司都在使用RN开发自己的移动端，我没用过RN，所以很想学习它，下面我就开始了，感兴趣的可以和我一起学习。
React简介
首先你需要知道的是：React是Facebook开发的一款JS库，在iOS上仅支持iOS7.0以上。
Facebook认为MVC无法满足他们的扩展需求，由于他们非常巨大的代码库和庞大的组织，使得MVC很快变得非常复复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，结果导致他们的MVC正在土崩瓦解，认为MVC不适合大规模应用。这个问题由于Facebook提出的Flux和React而得到了解决。
React Native提倡组件化开发，也就是说React Native给我们提供一个个封装好的组件让开发者来进行使用，甚至我们可以相关嵌套形成新的组件。
使用React Native我们可以维护多种平台(Web,Android和IOS)的同一份业务逻辑核心代码来创建原生应用。
1. Flux
先说一下FLux是什么？Flux是一个系统架构，用于推进应用中的数据单向流动。可以看一下下面关于Flux的原理图。
2. React特点
- 简单
- 简单的表述任意时间点你的应用应该是什么样子的，当数据发生变化的时候，React将会自动的管理UI界面更新。
- 声明式
- 在数据发生变化的时候，React实际上它仅仅是更新了变化的一部分而已。通过构造可重用组件，使用React你做的仅仅是构建组件。通过封装，使得组件代码复用、测试以及关注点分离更加容易。
React原理
下面我们简单的看一下React原理。
1. Virtual DOM
传统的web应用，操作DOM一般是直接更新操作的，但是我们知道DOM更新通常是比较昂贵的。而React为了尽可能减少对DOM的操作，提供了一种不同的而又强大的方式来更新DOM，代替直接的DOM操作。就是Virtual DOM,一个轻量级的虚拟的DOM，就是React抽象出来的一个对象，描述dom应该什么样子的，应该如何呈现。通过这个Virtual DOM去更新真实的DOM，由这个Virtual DOM管理真实DOM的更新。Virtual DOM是DOM在内存中的一种轻量级表达方式（lightweight representation of the document），可以通过不同的渲染引擎生成不同平台下的UI，JS和Native之间通过Bridge通信。
为什么通过这多一层的Virtual DOM操作就能更快呢？ 这是因为React有个diff算法，更新Virtual DOM并不保证马上影响真实的DOM，React会等到事件循环结束，然后利用这个diff算法，通过当前新的dom表述与之前的作比较，计算出最小的步骤更新真实的DOM。
2. 组件component
在DOM树上的节点被称为元素，在这里则不同，Virtual DOM上称为component。Virtual DOM的节点就是一个完整抽象的组件，它是由component组成。
3. State和Render
React是如何呈现真实的DOM，如何渲染组件，什么时候渲染，怎么同步更新的，这就需要简单了解下State和Render了。state属性包含定义组件所需要的一些数据，当数据发生变化时，将会调用Render重现渲染。
环境的搭建
下面我们就看一下需要搭建哪些环境。
1. React Native 开发基础环境
具体可以参考这个兄弟写的文章 —— React Native 环境搭建和创建项目(Mac)
安装Node.js
- 方式1：安装nvm，可以参考这里，运行下面命令
nvm install node && nvm alias default node
- 方式2：先安装
Homebrew，再利用Homebrew安装Node.js
//安装Home-brew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
//安装Node.js
brew install node
安装React Native的命令行工具（react-native-cli）
npm install -g react-native-cli
安装CocoaPods
这个就不多说了吧，开发基本都配置过这个东西。
React简单总结
- React不是一个MVC框架，它是构建易于可重复调用的
web组件，侧重于UI, 也就是view层 - React是单向的从数据到视图的渲染，非双向数据绑定
- 不直接操作DOM对象，而是通过虚拟DOM通过diff算法以最小的步骤作用到真实的DOM上。
- 不便于直接操作DOM，大多数时间只是对
virtual DOM进行编程
从上面我们可以看见，我们需要做什么？
- 搭建和配置环境
- 对Flex布局和css样式学习和理解
- JavaScript - ES6学习和理解
- 具体的工程实践
参考文章
1. RN中文网
2. RN英文网
3. React Native 集成到原生项目(iOS)
4. RN官网
5. React 简单介绍
6. React Native：从入门到原理
7. React Native - Build native mobile apps using JavaScript and React
8. GitHub react-native.cn
9. GitHub Facebookreact-native
10. 为什么我们要造React？
11. 江清清的React Native专题
12. ES6入门
13. Flex布局入门
后记
本篇已结束，后面更精彩~~~
