React的结构及示例介绍

如果不考虑工程化的问题，React的运行基础环境非常简单，只需要在HTML文件中引入两个js文件（react.min.js和react-dom.min.js）即可开始工作。以Windows操作系统为例（Linux下类似），首先官方网站下载，在页面中直接单击“Download React v15.2.1”按钮即可下载React最新版本（这里以v15.2.1版本为例），下载完成后的压缩包为react-15.2.1.zip，解压后文件结构如下图所示。

其中，React运行时最常用到的核心文件是build文件夹下的react.min.js和react-dom.min.js文件，均为经过代码压缩后的文件，通常部署时应使用这两个文件。这两个文件对应的未压缩版本文件是react.js和react-dom.js，一般在开发时引用，便于调试。建立工程文件夹，这里假定为d：\react-projects。React从0.14版本以上开始将React核心分成两个文件，这使得React结构更清晰。react.js实现React核心的逻辑，且与具体的渲染引擎无关，从而可以跨平台共用。如果应用要迁移到React Native，这一部分逻辑是不需要改变的。react.js中包含了React.createElement、React.createClass等核心API。 react-dom.js则包含了具体的DOM渲染更新的逻辑，以及服务端渲染的逻辑，这部分就是与浏览器相关的部分了。如果要将应用迁移为移动APP，则这部分可能会需要重新实现。react-dom.js中主要的API是ReactDOM.render。React支持的浏览器有IE 8以上版本、Chrome和Firefox等。

至此已完成我们的首个React工程，这段代码仅仅实现了在浏览器窗口中输出字符串Hello world，双击index.html可以直接在浏览器中看到效果。这个例子很简单，但千里之行，始于跬步，通过剖析这个示例，我们会了解到更多的信息。可以看到，我们首先通过调用React.createClass方法注册了一个组件类HelloComponent，这个组件类只包含了一个render函数，该函数通过调用React.createElement实现了以下HTML内容的输出： Hello world

创建好的组件类HelloComponent随后被ReactDOM.render函数所调用。该函数将调用React.createElement（HelloComponent，null）所生成的组件“挂接”到浏览器DOM中的div标签下，从而实现最终在浏览器的输出。剖析这个过程，通过React.createElement调用产生的元素我们称为“虚拟DOM”元素，与真实的浏览器DOM元素相区别。而这个元素及其所有子元素（如果有的话）最终要渲染到真实的浏览器DOM中才能得以呈现。虚拟DOM是React的核心思想，使用React只有两个步骤：一是创建虚拟DOM（多层嵌套），二是渲染到浏览器中。在开发中我们的主要工作就是逐级创建出所需要的虚拟DOM树并响应用户的动作来改变虚拟DOM树的组成。从这个例子中还可以感受到面向组件思想的体现，React的操作围绕组件展开，使用组件需要先注册一个组件类，然后再实例化这个组件类。具体的功能实现均封装在组件中。另外，还注意到，我们只是声明了组件的内容，并没有关注虚拟DOM怎么挂接的问题，这些都由React替我们完成了，除此之外React还在幕后做了更多的工作，在后面的章节我们还会一一解读。虚拟DOM是React的核心思想，理解这一点就把握住了React的本质。可以说，整个React技术均是围绕虚拟DOM而设计展开的。