React之创建元素

React之创建元素

React创建元素是围绕React.createElement(type,props,content)方法实现的。另，ReactDOM只是使用React库的一种方式， 告诉React，需要React渲染什么，而不是实际页面上要渲染什么。（记录：在浏览器中实现效果，需要使用的是react-dom）

其中，

1.type：

是创建的元素类型，如'div','span','p'等等。

2.props：

是创建的元素包含的属性所组成的对象，形如：

{ className:'div-class' }，或null

3.content：

是要创建的元素里面含有的内容，可以是普通文本，也可以是使用React创建的元素,或者是javascript代码，形如：

'I am text.'或

React.createElement('span',null,'I am text.');

创建React元素，最终是为了渲染到页面上，将内容渲染到页面上。React创建的元素通过ReactDOM提供的render()方法渲染到页面上。

先在DOM节点上放置一个DOM节点，如：

React创建一个class为react-dom的元素，然后在DOM上找到id为dom_root的DOM节点，将创建的元素放置在id为dom_root的节点里面，翻译成React语法，如下所示：

const reactElement = React.createElement('span',,'I am text.');

ReactDOM.render(reactElement,document.getElementById('dom_root'));

此时页面上已经可以看到效果了。

小点：

1.在控制台打印出reactElement，reactElement是一个含有'key','props','type'和其它私有属性的js对象。

下一篇总结：JSX