React的Element的创建和render

React的Element是React应用程序的最小构建块，它是用来描述我们在屏幕上看到的浏览器页面上的内容。

在React中构建 Element 有两种方式：

1、JSX的方式，JSX不是React的必用技术，但它可以用来产生一个 React “element”.

1const element = (
2  <h1 className="greeting">
3    Hello, world!
4  </h1>
5);

2、使用React.createElement方法

方法声明：

React.createElement( type, //type可以是html的tag标签,例如'div'或``'span'，也可以是React.Component的类，或者React fragment type [props [...children] )

示例 ：

1const element = React.createElement(
2  'h1',
3  {className: 'greeting'},
4  'Hello, world!'
5);

上述1和2的方式是等价的。

下面再介绍一种简写形式：

1const e = React.createElement; //先将React.createElement赋给变量e，这样e就变成了React.createElement的简写了
2
3const element = e( 'h1', {className:'greeting'}, 'Hello , world' );

要呈现一个React element到一个root DOM节点中，需要通过调用 ReactDOM.render()方法在页面中进行呈现，下面是一个完整的示例：

1import React from 'react'
2import ReactDOM from 'react-dom'
3
4class HelloMessage extends React.Component {
5  render() {
6    return (
7      <div>
8        Hello {this.props.name}
9      </div>
10    );
11  }
12}
13
14ReactDOM.render(
15  <HelloMessage name="Taylor" />,
16  document.getElementById('root')
17);

在上述代码中可看到React.Component组件的render()方法实际返回的就是一个React的Element