深入理解React的Virtual DOM

React在前端界一直很流行，而且学起来也不是很难，只需要学会JSX、理解State和Props，然后就可以愉快的玩耍了，但想要成为React的专家你还需要对React有一些更深入的理解，希望本文对你有用。

这是Choerodon的一个前端页面

在复杂的前端项目中一个页面可能包含上百个状态，对React框架理解得更精细一些对前端优化很重要。曾经这个页面点击一条记录展示详情会卡顿数秒，而这仅仅是前端渲染造成的。

为了能够解决这些问题，开发者需要了解React组件从定义到在页面上呈现（然后更新）的整个过程。

React在编写组件时使用混合HTML和JavaScript的一种语法（称为JSX）。 但是，浏览器对JSX及其语法一无所知，浏览器只能理解纯JavaScript，因此必须将JSX转换为HTML。 这是一个div的JSX代码，它有一个类和一些内容：

<div className='cn'>  
  文本  
</div> 

在React中将这段jsx变成普通的js之后它就是一个带有许多参数的函数调用：

React.createElement(  
  'div',  
  { className: 'cn' },  
  '文本'  
); 

它的第一个参数是一个字符串，对应html中的标签名，第二个参数是它的所有属性所构成的对象，当然，它也有可能是个空对象，剩下的参数都是这个元素下的子元素，这里的文本也会被当作一个子元素，所以第三个参数是 “文本” 。

到这里你应该就能想象这个元素下有更多children的时候会发生什么。

<div className='cn'>  
  文本1  
  <br />  
  文本2  
</div>  

React.createElement(  
  'div',  
  { className: 'cn' },  
  '文本1',              // 1st child  
  React.createElement('br'), // 2nd child  
  '文本1'               // 3rd child  
) 

目前的函数有五个参数：元素的类型，全部属性的对象和三个子元素。 由于一个child也是React已知的HTML标签，因此它也将被解释成函数调用。

到目前为止，本文已经介绍了两种类型的child参数，一种是string纯文本，一种是调用其他的React.createElement函数。其实，其他值也可以作为参数，比如：

•  基本类型 false，null，undefined和 true
•  数组
•  React组件

使用数组是因为可以将子组件分组并作为一个参数传递：

React.createElement(  
  'div',  
  { className: 'cn' },  
  ['Content 1!', React.createElement('br'), 'Content 2!']  
) 

当然，React的强大功能不是来自HTML规范中描述的标签，而是来自用户创建的组件，例如：

function Table({ rows }) {  
  return (  
    <table>  
      {rows.map(row => (  
        <tr key={row.id}>  
          <td>{row.title}</td>  
        </tr>  
      ))}  
    </table>  
  );  
} 

组件允许开发者将模板分解为可重用的块。在上面的“纯函数”组件的示例中，组件接受一个包含表行数据的对象数组，并返回React.createElement对<table>元素及其行作为子元素的单个调用 。

每当开发者将组件放入JSX布局中时它看上去是这样的：

<Table rows={rows} /> 

但从浏览器角度，它看到的是这样的：

React.createElement(Table, { rows: rows }); 

请注意，这次的第一个参数不是以string描述的HTML元素，而是组件的引用（即函数名）。第二个参数是传入该组件的props对象。

将组件放在页面上

现在，浏览器已经将所有JSX组件转换为纯JavaScript，现在浏览器获得了一堆函数调用，其参数是其他函数调用，还有其他函数调用......如何将它们转换为构成网页的DOM元素？

（编辑：ASP站长网）