深入理解React的Virtual DOM

为此，开发者需要使用ReactDOM库及其render方法：

function Table({ rows }) { /* ... */ } // 组件定义  
// 渲染一个组件  
ReactDOM.render(  
  React.createElement(Table, { rows: rows }), // "创建" 一个 component  
  document.getElementById('#root') // 将它放入DOM中  
); 

当ReactDOM.render被调用时，React.createElement最终也会被调用，它返回以下对象：

// 这个对象里还有很多其他的字段，但现在对开发者来说重要的是这些。  
{  
  type: Table,  
  props: {  
    rows: rows  
  },  
  // ...  
} 

这些对象构成了React意义上的Virtual DOM

它们将在所有进一步渲染中相互比较，并最终转换为真正的DOM（与Virtual DOM对比）。

这是另一个例子：这次有一个div具有class属性和几个子节点：

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

变成：

{  
  type: 'div',  
  props: {  
    className: 'cn',  
    children: [  
      'Content 1!',  
      'Content 2!'  
    ]  
  }  
} 

所有的传入的展开函数，也就是React.createElement除了第一第二个参数剩下的参数都会在props对象中的children属性中，不管传入的是什么函数，他们最终都会作为children传入props中。

而且，开发者可以直接在JSX代码中添加children属性，将子项直接放在children中，结果仍然是相同的：

<div className='cn' children={['Content 1!', 'Content 2!']} /> 

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!