版本记录

版本号	时间
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布局入门

后记

本篇已结束，后面更精彩~~~