React as a UI Runtime(二、React元素和入口)

5次阅读

共计 1327 个字符，预计需要花费 4 分钟才能阅读完成。

1、React 元素
在宿主环境中，一个宿主实例是最小的单位（像 DOM 节点）。在 React 中最小的单位是 React 元素。一个 React 元素就是一个描述宿主实例的 Javascript 对象。
// 用 JSX 语法糖对这个对象描述
// <button className=”blue” />
{
type: ‘button’,
props: {className: ‘blue’}
}
一个 React 元素没有宿主实例与它绑定，他只是描述你想在屏幕上看到的 UI 的描述，所以他是轻量级的。就如同宿主实例，React 也能实现树结构：
// 用 JSX 语法糖对这些对象描述
// <dialog>
// <button className=”blue” />
// <button className=”red” />
// </dialog>
{
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’} }
<button 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’;