React Native 介绍

初识 React

随着 FaceBook 推出了 React 框架，这个问题得到了大幅度改善。我们可以把一组相关的 HTML 标签，也就是 app 内的 UI 控件，封装进一个组件(Component)中，我从阮一峰的 React 教程中摘录了一段代码：

var MyComponent = React.createClass({  handleClick: function() {    this.refs.myTextInput.focus();  },  render: function() {    return (      <div>        <input type="text" ref="myTextInput" />        <input type="button" value="Focus the text input" onClick={this.handleClick} />      </div>    );  }});

如果你想问：“为什么 JavaScript 代码里面出现了 HTML 的语法”，那么恭喜你已经初步体会到 React 的奥妙了。这种语法被称为 JSX，它是一种 JavaScript 语法拓展。JSX 允许我们写 HTML 标签或 React 标签，它们终将被转换成原生的 JavaScript 并创建 DOM。

在 React 框架中，除了可以用 JavaScript 写 HTML 以外，我们甚至可以写 CSS，这在后面的例子中可以看到。

理解 React

前端界总是喜欢创造新的概念，仿佛谁说的名词更晦涩，谁的水平就越高。如果你和当时的我一样，听到 React 这个概念一脸懵逼的话，只要记住以下定义即可：

React 是一套可以用简洁的语法高效绘制 DOM 的框架

上文已经解释过了何谓“简洁的语法”，因为我们可以暂时放下 HTML 和 CSS，只关心如何用 JavaScript 构造页面。

所谓的“高效”，是因为 React 独创了 Virtual DOM 机制。Virtual DOM 是一个存在于内存中的 JavaScript 对象，它与 DOM 是一一对应的关系，也就是说只要有 Virtual DOM，我们就能渲染出 DOM。

当界面发生变化时，得益于高效的 DOM Diff 算法，我们能够知道 Virtual DOM 的变化，从而高效的改动 DOM，避免了重新绘制 DOM。

当然，React 并不是前端开发的全部。从之前的描述也能看出，它专注于 UI 部分，对应到 MVC 结构中就是 View 层。要想实现完整的 MVC 架构，还需要 Model 和 Controller 的结构。在前端开发时，我们可以采用 Flux 和 Redux 架构，它们并非框架(Library)，而是和 MVC 一样都是一种架构设计(Architecture)。

如果不从事前端开发，就不用深入的掌握 Flux 和 Redux 架构，但理解这一套体系结构对于后面理解 React Native 非常重要。

React Native

---

RN 开发环境搭建

首先 IDE 方面，RN 推荐了一些工具：

• Nuclide 是 Facebook 内部用来开发 RN 的工具，Debug 功能强大。只不过这是一款 Atom 的插件，意味着你必须先安装 Atom，再来安装这款开发插件；

• Deco 是专为开发 RN 诞生的工具，可以快速搜索开源的第三方 RN 组件并直接插入到代码中，用 MacOS 的同学可以尝试下。我本人最开始也是试用这个，上手简单、小巧简洁。不足的是功能有点简单，无论是 Debug 功能还是代码检查之类的都不具备；

• Sublime 可以通过第三方包来达到不错的开发效率，各方面还算可圈可点；

  sublime 插件:

  1. Babel 用来高亮 React JSX 语法，支持 ES6，而 React-Native 就是搭建在 React.js 基础上的；
  2. React-Native-Snippets 可以快速生成 RN 的一些模版代码；
  3. ESLint 超级强大的 Lint 工具，支持 ES6、JSX 语法检查，而且还有 React 和 RN 的插件，比纯粹的 JSXHint/JSLint 都强大；

• Visual Studio 这款也是蛮强大的 IDE，之前有用过的小伙伴可以试一下。

当然，用 Atom 的小伙伴自然要首先考虑 Nuclide。

---

引入 React Native

1. 从零构建

   使用命令: $ react-native init AwesomeProject 即可创建一个 RN 工程项目, 项目结构如下:

   

   ​

   里面有四个文件夹：

   • android / ios：各自存放了一个相关平台的工程 project，可以直接下拉 JS Bundle 并运行，对于移动端小白而言可以不用管里面的具体实现；
   • node_modules：里面是自动生成的 node 依赖之类的文件，通过读取 package.json 里的配置来生成；
   • js：这个文件夹最为重要，我们的开发都在这个文件夹里，把写好的 js 文件打包下发给 client 就会自动生效。

2. 集成到已有项目

   RN 的官方文档里有一节 Integration with Existing Apps

   以 Android 为例，大概要做以下几步：

   1. 添加 gradle 依赖：compile "com.facebook.react:react-native:+" // From node_modules.；
   2. 创建空的 Activity ，指定 JS bundle 和入口 Component 名字即会自动在这个 Activity 里去加载 JS bundle 文件；
   3. 在 Activity 里监听 onBackPressed 事件，用来与 JS 端协作处理返回键点击事件。
   4. 启动 server，运行 App 即可。

   总之需要说明的是，即使是移动端小白，也可以遵循文档里的指示完成这一步。接下来的大部分时间只要关心 JS 端开发就行了。

---

附上一些开源项目:

稀土掘金客户端(Android/iOS)

项目开源地址:https://github.com/wangdicoder/JueJinClient

---

React Native开源项目-新浪微博客户端

源码项目地址:https://github.com/pheromone/react_native_weibo