React 开胃菜

背景

基于HTML的前端界面开发正变得越来越复杂，其本质问题基本可以归结于如何将来自服务器端或者用户输入的动态数据高效的反应到复杂的用户界面上。

概述

React 是一个Facebook和Instagram用来创建用户界面的JavaScript库。那么Facebook开发这个Js库是为了解决什么问题呢？

基于上面的背景来说, React主要是为了解决一个问题, 构建随着时间而数据不断变化的大规模应用程序。相比传统型的前端开发，React开辟了一个相对另类的途经，实现了前端界面的高效率高性能开发。

原理

在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能呢瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。

React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用JavaScript实现一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行比对，得到DOM结构的变化，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。

而且React能够批处理虚拟DOM的刷新，即多次的数据变化会被合并，比如DOM A => B, B => C, C => A, React会认为UI没有任何变化。

尽管每次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是不同DOM部分。

我们开发者需要关心仅仅是数据的变化和在任意一个数据状态下，整个界面是如何Render的，而不需要关心数据变化后如何更新DOM，这后面的一切React会帮我们搞定。

开胃菜

说那么多，还不如实际演练来的体会深切，下面我们就来写一个TODOList 的DEMO，来体会下React的神奇之处吧。

我们使用boostrap来快速实现我们需要的样式，下面是html代码


    
        React TODOList
        

    
        
            
                TODOList - 开胃菜
                
                    9点 整理购书清单
                    11 点外出办事
                    明天上医院
                    回家

效果图

第一步，React 初尝

下一步我们来看看怎么用React来实现上图的TODOList的面板组件。

可以从这里下载入门套件

首先，引入我们需要的React相关js。


    
        React TODOList

jsx/todolist.jsx

ReactDOM.render(
    Hello, world!,
    document.body
    );

如果页面出现了Hello, world，那么恭喜你，你已经成功的迈出了第一步了。

我们来讲解上面发生了什么。

ReactDOM.render()

ReactDOM.render是React的最基本方法，用于将模板转为HTML语言，并插入到指定的DOM节点。
上面的代码将一个h1标题，插入body中。运行结果如下

JSX语法

我们把HTML语言直接写在JavaScript语言中, 即在JavaScript代码写着XML格式的代码称为JSX, 为了把JSX转成标准的JavaScript, 我们用