RN 基础

React和RN: React是facebook页面组件的抽象和形态的技术方案--Web RN app 编译后的原生应用 JavaScript用在不同的地方 ReactNative 框架，jsc react 跨平台，组件，web的发布能力 提供了原生ui组件，手势识别，FlexBox的css布局模式，跨平台，可使用npm中的模块， 特点：JSX语法，组件化模式，Virtual DOM ，单向数据流 基本模式：每个React应用组件组合，组件是由属性和状态来配置，当状态发生变化时更新ui，组件结构是由虚拟的DOM来维护，确保了实际更新的DOM只包括真正产生了状态变化的部分 同一套技术应用不同端 环境搭建 最新系统 xcode-select --install homebrew 环境变量等等一条龙服务 watchman和flow：监视文件并记录文件改动情况和检查JavaScript的静态类型的检查器，找出JS代码中的类型错误 git等  nodejs nvm nvm alias default install  检查端口是否在使用  装RN  

使用Sublime Text 编写JSX  SublimeText 3 安装package control      Control+~     Commond+Shift+P     install package control     babel     也就是为了识别JSX 

新建项目： 1、// 创建新项目，项目名称为Test react-native init HelloReact

2、执行

adb devices // 上述会列出当前可以使用的设备，如果列表为空，则后续的无法运行。 // 第二步，开启一个命令行控制台，进入项目目录 react-native start // 上述命令是开启jsbundle服务器，用于测试设备上Reload JS的服务器。 // 第三步, 再开启一个新的命令行控制台，进入项目目录 react-native run-android  在调用react-native run-android命令时，其实这个命令就是执行的两部分操作一是是构建你的android项目并生成apk，另外一个是打开react-native的package管理工具同时编译你的js文件，其实可以在项目根目录的package.json下找到

热更新，页面调试

RN 项目结构： 
    package.json记录一些模块版本信息     node_modules/react-native packager 负责读取JSX和构建JavaScript代码 打包工具                           
local_cli                            
node_modules/art 在RN绘制 JS 类库 
android 放置源代码地方等等，babel ES5     ios
入口文件     index_android.js
    .flowconfig JS 代码检查    哪些要检查哪些不要
gitignore
  

入口文件包含的4个部分：

    导入模块 ES6 import     class extends    render return JSX 语法格式

   const    registerComponent注册 

原理： 1 React Native for Android 和 for IOS的基本原理是一致的，通过android的JavaScriptCore来异步解析js代码(jsbundle文件)，然后根据引入的支持和配置，渲染成原生native组件。
 JSX 允许我们写 HTML 标签或 React 标签，它们终将被转换成原生的 JavaScript 并创建 DOM。

React 是一套可以用简洁的语法高效绘制 DOM 的框架
所谓的“高效”，是因为 React 独创了 Virtual DOM 机制。Virtual DOM 是一个存在于内存中的 JavaScript 对象，它与 DOM 是一一对应的关系，也就是说只要有 Virtual DOM，我们就能渲染出 DOM。 当界面发生变化时，得益于高效的 DOM Diff 算法，我们能够知道 Virtual DOM 的变化，从而高效的改动 DOM，避免了重新绘制 DOM。

2 复用React系统，也减少了一定学习和开发成本，更重要的是利用了React里面的分层和diff机制。js层传给Native层的是一个diff后的json，然后由Native将这个数据映射成真正的布局视图。

组件生命周期：

 ES5/6组件形态区别：

1.引入模块的语法不同  2.组件的声明方式  3-4.创建组件的方式所导致的语法不同(, ;) 5.组件内静态成员的声明方式  6.对象方法的简写形式 7.ES6不支持mixin 8.组件内的this指向  9.变量声明关键字

React 和 MVC