React的Element的建立和render

React的Element是React應用程序的最小構建塊，它是用來描述咱們在屏幕上看到的瀏覽器頁面上的內容。

在React中構建 Element 有兩種方式：

一、JSX的方式，JSX不是React的必用技術，但它能夠用來產生一個 React 「element」.

const element = ( <h1 className="greeting"> Hello, world!
  </h1>
);

二、使用React.createElement方法

方法聲明：

React.createElement(
  type,    //type能夠是html的tag標籤,例如，也能夠是React.Component的類，或者React fragment type
  [props
  [...children]
)'div'或'span'

示例 ：

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

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

 

下面再介紹一種簡寫形式：

const e = React.createElement; //先將React.createElement賦給變量e，這樣e就變成了React.createElement的簡寫了

const element = e( 'h1', {className:'greeting'}, 'Hello , world' );

 

 

要呈現一個React element到一個root DOM節點中，須要經過調用 ReactDOM.render()方法在頁面中進行呈現，下面是一個完整的示例：

import React from 'react' import ReactDOM from 'react-dom' class HelloMessage extends React.Component { render() { return ( <div> Hello {this.props.name} </div>
 ); } } ReactDOM.render( <HelloMessage name="Taylor" />,
  document.getElementById('root') );

在上述代碼中可看到React.Component組件的render()方法實際返回的就是一個React的Element