React基本架构及虚拟DOM结构

React为了更好的性能和跨浏览器兼容，实现了一个独立于浏览器的DOM和事件系统。浏览器DOM是由HtmlElement元素组成的树，虚拟DOM与浏览器DOM类似，也是由ReactNode节点元素组成的树，一个ReactNode实例表示一个轻量的、无状态的、不可变的虚拟DOM元素。ReactNode与HtmlElement基本相似，只有微小的差别，而且ReactNode最终还是需要映射到HtmlElement才能展示出来。虚拟DOM树由ReactDom.render函数渲染到实际的浏览器DOM节点上，形成最终的界面效果。两者之间的对比关系如下图所示：

ReactNode的数据来源可以是字符串（string）、数字串（number）、ReactElement。同时，ReactNode也支持嵌套，可以包含子级ReactNode的数组。多级嵌套的ReactNode最终形成一颗虚拟DOM树。用户对界面的操作事件首先由浏览器接收，如果是React渲染出来的DOM，将会由React接管并派送到对应的React组件实例，并由组件实例对事件做出响应。

React中最主要的类型就是ReactElement，是ReactNode的主要数据来源。ReactElement有四个属性：type、props、key和ref。除此之外，没有其他的属性或成员函数。虚拟DOM元素的创建通常在render方法中完成。通过调用React.createElement创建ReactElement元素，createElement方法的第一个参数就是HTML标签名或预先注册好的ReactClass对象；第二个参数是ReactElement的属性，使用json格式描述；第三个及以后的参数是该元素所要包含的子元素。参看下面的例子：

对于自定义的组件类型名，React约定首字母大写且需要预先注册。如果是HTML中规定的标签，则可以直接使用而不需要注册，但是标签名应该小写，React通过组件类型名的首字母是否大写来判断是否自定义组件。组件类型注册需要调用React.createClass，调用createClass方法传递的参数是组件类的属性和成员函数。从上面的例子可以看出，更为复杂的虚拟DOM树也是通过不停地调用React.createElement方法构建出来的。