认识达内从这里开始

在网页设计中，html代码编程是制作网页的基础语言，同时还需要我们利用web的相关技术将后台服务器与前端的html页面相联系。而web前端工程师的作用也就是将服务器后台反馈的数据与用户在前端页面输入的数据，通过一系列复杂的算法之后，可以完美的呈现在用户访问的页面之上。

在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代码

TODOList - 开胃菜

9点 整理购书清单

11 点外出办事

明天上医院

回家

效果图

第一步，React 初尝

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

可以从 这里 下载入门套件

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

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, 我们用

达内时代科技集团致力于培养面向电信和金融领域的Java、C++、C#/.Net、3G/Android、3G/IOS、PHP、嵌入式、软件测试、UID、网络营销、网络工程、会计、UED、web、Unity3D、大数据、童程童美等17大方向中高端软件人才课程与少儿教育课程。选择运城计算机培训，不再孤军奋战，轻轻松松做IT高薪白领。运城达内培训带领有明确目标的学子迈向成功之路!想找工作的求职者可以加QQ：3373924515（太原达内就业服务部）咨询了解。