React as a UI Runtime(二、React要素と入口)

1、React元素
宿主環境において、1つの宿主インスタンスは、DOMノードのような最小単位である.Reactの中で一番小さい単位はReact元素です.一つのReact要素は、宿主の例を示すJavascriptオブジェクトである.

//  JSX          
// 
{
  type: 'button',
  props: { className: 'blue' }
}

一个React元素没有宿主实例与它绑定，他只是描述你想在屏幕上看到的UI的描述，所以他是轻量级的。
就如同宿主实例，React也能实现树结构：

//  JSX          
// 

//   
//   
// 
{
  type: 'dialog',
  props: {
    children: [{
      type: 'button',
      props: { className: 'blue' }
    }, {
      type: 'button',
      props: { className: 'red' }
    }]
  }
}

(ヒント:この概念を説明するために重要ではない属性を無視しました.)
ただし、React元素には整合性のないマークがあることを覚えてください.彼らは常に再建と破壊を続けています.React元素は可変ではない.例えば、React要素のchildren属性と他の属性は変えられません.前とは違った内容をレンダリングしたい場合は、新たなReact要素の説明を開始します.私はReact元素を映画の中の各フレームに比べるのが好きです.これらはUIのある時点での状態を述べ、それらは永遠に変わらない.
2.入り口
各Reactレンダリング装置には入口があります.それはReactに特定のReact元素ツリーを宿主の実例のAPIにレンダリングすることを教えます.

ReactDOM.render(
  // { type: 'button', props: { className: 'blue' } }
  ,
  document.getElementById('container')
);

当我们说ReactDOM.render(reactElement, domContainer)，就意味着：“亲爱的React，将我的React元素放到domContainer 的宿主树去”。
React会看着reactElement.type（在我们的例子中，‘button’）并告诉React Dom renderer 创造一个宿主实例并且设置属性：

function createHostInstance(reactElement) {
  let domNode = document.createElement(reactElement.type);
  domNode.className = reactElement.props.className;
  return domNode;
}

私たちの例では、コードは以下の通りです.

let domNode = document.createElement('button');
domNode.className = 'blue';

domContainer.appendChild(domNode);

React要素がreact Element.props.childrenにサブ要素を含む場合、Reactは最初のレンダリングで再帰的にそれらのために宿主インスタンスを作成する.