将 React 作为 UI 运行时

宿主树

大多数教程把 React 称作是一个 UI 库。这是有道理的，因为 React 就是一个 UI 库。正如官网上的标语所说的那样—构建用户界面的库。

但是本篇文章将以一种不同的方式来讲述 React — 因为它更像是一种编程运行时。

本篇文章不会教你任何有关如何创建用户界面的技巧。但是它可能会帮助你更深入地理解

React 编程模型。

React 程序通常会输出一棵会随时间变化的树。有可能是一棵 DOM 树，iOS 视图层，又或是 JSON 对象通常我们希望用它来展示 UI 。我们称它为“宿主树”

所以到底 React 有什么用呢？非常抽象地，它可以帮助你编写可预测的，并且能够操控复杂的宿主树进而响应像用户交互、网络响应、定时器等外部事件的应用程序。

稳定性。宿主树是相对稳定的，大多数情况的更新并不会从根本上改变其整体结构。如果应用程序每秒都会将其所有可交互的元素重新排列为完全不同的组合，那将会变得难以使用。比如按钮突然不见了？

通用性。宿主树可以被拆分为外观和行为一致的 UI 模式（例如按钮、列表和头像）而不是随机的形状。

宿主实例

宿主树由节点组成，我们称之为“宿主实例”。

在 DOM 环境中，宿主实例就是我们通常所说的 DOM 节点 — 就像当你调用 document.createElement('div') 时获得的对象。在 iOS 中，宿主实例可以是从 JavaScript 到原生视图唯一标识的值。

宿主实例有它们自己的属性（例如 domNode.className 或者 view.tintColor ）。它们也有可能将其他的宿主实例作为子项。

通常会有原生的 API 用于操控这些宿主实例。例如，在 DOM 环境中会提供像 appendChild、removeChild、setAttribute 等一系列的 API 。

渲染器

渲染器教会 React 如何与特定的宿主环境通信以及如何管理它的宿主实例。React DOM、React Native 都可以称作 React 渲染器。

React 渲染器能以下面两种模式之一进行工作。

绝大多数渲染器都被用作“突变”模式。这种模式正是 DOM 的工作方式：我们可以创建一个节点，设置它的属性，在之后往里面增加或者删除子节点。宿主实例是完全可变的。

但 React 也能以“不变”模式工作。这种模式适用于那些并不提供像 appendChild 的 API 而是克隆双亲树并始终替换掉顶级子树的宿主环境。在宿主树级别上的不可变性使得多线程变得更加容易。React Fabric 就利用了这一模式。

作为 React 的使用者，你永远不需要考虑这些模式。我只想强调 React 不仅仅只是从一种模式转换到另一种模式的适配器。它的用处在于以一种更好的方式操控宿主实例而不用在意那些低级视图 API 范例。

React 元素

在宿主环境中，一个宿主实例（例如 DOM 节点）是最小的构建单元。而在 React 中，最小的构建单元是 React 元素。

React 元素是一个普通的 JavaScript 对象。它用来描述一个宿主实例。

// JSX 是用来描述这些对象的语法糖。
// <button className="blue" />
{type: 'button',props: { className: 'blue' }
}

React 元素是轻量级的因为没有宿主实例与它绑定在一起。同样的，它只是对你想要在屏幕上看到的内容的描述。

但是，请记住 React 元素并不是永远存在的。它们总是在重建和删除之间不断循环着。

React 元素具有不可变性。例如，你不能改变 React 元素中的子元素或者属性。如果你想要在稍后渲染一些不同的东西，你需要从头创建新的 React 元素树来描述它。

我喜欢将 React 元素比作电影中放映的每一帧。它们捕捉 UI 在特定的时间点应该是什么样子。它们永远不会再改变。

入口

每一个 React 渲染器都有一个“入口”。正是那个特定的 API 让我们告诉 React ，将特定的 React 元素树渲染到真正的宿主实例中去。

例如，React DOM 的入口就是 ReactDOM.render ：

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

当我们调用 ReactDOM.render(reactElement, domContainer) 时，我们的意思是：“将我的 reactElement 映射到 domContaienr 的宿主树上去吧。”

React 会查看 reactElement.type （在我们的例子中是 button ）然后告诉 React DOM 渲染器创建对应的宿主实例并设置正确的属性：

// 在 ReactDOM 渲染器内部（简化版）
function createHostInstance(reactElement) {let domNode = document.createElement(reactElement.type);domNode.className = reactElement.props.className;return domNode;
}

在我们的例子中，React 会这样做：

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

如果 React 元素在 reactElement.props.children 中含有子元素，React 会在第一次渲染中递归地为它们创建宿主实例。