React 简单介绍

先说 React 与 React Native

他们是真的亲戚，可不像 Java 和 Javascript 一样。

其实第一次看到 React 的语法我是拒绝的，因为这么丑的写法，你不能让我写我就写。

但当我发现 React Native 横空出世后，它学习一次到处运行的理念非常诱人。React Native 可以写出原生体验的 iOS/Android 应用？那不就多了一门装逼技能？所以我们调研小组试了一下，感觉 "Duang" 一下，很爽很舒服。写 React Native 需要两门基础技能：React 语法 和 iOS 基础知识。

很爽很舒服，索性就研究一下，算是入门。 了解之后发现，React 真是有另一番天地，值得学习。

接下来总结以下我对 React 的理解，分享给大家。

 

至于 React Native，有机会再好好探究下。

这部分废话太多，喜欢实战的可以直接看代码部分。

React 是 Facebook 出品的一套颠覆式的前端开发类库。

为什么说它是颠覆式的呢？

内存维护虚拟 DOM

对于传统的 DOM 维护，我们的步骤可能是：

首先，我们操作 DOM 是最昂贵的开销，对于 需要反复更新 DOM 的网页，无疑是噩梦。其次，对 DOM 局部的更新以及事件绑定加大了维护的难度。

而 React 引入了一个全新的概念：虚拟 DOM。

虚拟 DOM 是躺在内存里的一种特殊的结构，我们可以理解为这是真实 DOM 在内存里的映射。

除了结构上的映射外，这个虚拟的 DOM 还包括了渲染 真实所需要的数据以及事件绑定。

全量更新真实 DOM

虚拟 DOM 在创建时，首先是使用 JSX 的语法生成一个真实 DOM 树的映射，其次是从服务器端拉取远程数据，接着注入到这个虚拟 DOM 树中，同时绑定事件。

好了，有了虚拟 DOM、数据、事件，万事俱备。

接下来，调用 render() 方法一次性渲染出真实的 DOM，然后全量插入到网页中。

虚拟 DOM 静静地躺在内存里，等待数据更新。

新数据来临，调用 setState() 方法更新数据到虚拟 DOM 中，然后自动调用 render() 再一次性渲染出真实的 DOM ，然后全量更新到网页中。

就这么简单。 除了带来性能上的提升之外，很显然这种写法简化了我们维护 DOM 的成本 -- 我们只需要维护一份数据。

只是 View，可配合其他类库使用

可以看到，React 里最重要的概念有虚拟 DOM、单向数据注入（虚拟 DOM 到真实 DOM）。 这里并没有引入太多其他的东西，所以我对 React 的理解是一个类库，而非框架。 如果要使用 MVC、MVVM 等技术的吧，完全可以把 React 当做其中的 V, 即 View, 配合其他类库使用。

组件化

我虽然是个前端菜鸟，但日观天象也是能嗅到下一代 Web 将是组件化、组件复用共享的时代。

React 编写起来，就是编写一个个的组件。

我对一个 React 组件的理解是：

以上三者可以打包复用，甚至是无缝接入，我脚得它就可能是未来了。

HTML 与 JS 使用 JSX 语法糅合到一起的方式是见仁见智，恐怕会引起战争。

我刚接触到 JSX 的时候，一开口也是『我*，好丑』。

但慢慢地却发现，这种方式一开始写起来别扭，但用得却很爽。

接下来，我通过编写一个简单的应用来入门 React。

看完如果大呼不过瘾，建议直飞 React 官方看文档，那才是宝藏！

 

React 简单示例

示例代码放置在 demo/目录下，每个文件夹为一个独立的示例。

先看下这个 demo 最终的样子吧：

demo - 速度与激情

每个示例的入口文件 index.html 结构大体相同：

渲染一个虚拟 DOM 为真实 DOM

使用 render() 方法生成真实 DOM 并插入到网页中。