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方法构建出来的。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180128A0CI1Y00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券