React 作为一个 UI 运行时（一、宿主环境和渲染器）

很多教程把React介绍为一个UI框架。这很合理因为它就是一个UI库，这就是react标语的意思。
这篇文章不会叫你任何关于建立用户界面的知识，但是会帮助你更生层次的理解React编程模型。
这是一篇深入解析的文章，对初学者不太适合。在这篇文章我将通过第一准则描述大部分的React编程，我将解释react是如何工作的。

1 Host Tree

一些程序输出数字，另一些程序输出诗歌。不同的语言和他们的运行时通常会对特定的实例进行优化，React也不例外。

React会生成一颗不断变化的树结构。它可能是Dom树，ios层级，关于PDF的原语树，或者是JSON的对象。通常我们希望用它们来生成UI界面。
我们称这些结构为“host tree”， 因为通常他们是React之外宿主环境的一部份——就像Dom和iOS。host tree 通常拥有自己的命令式的API。React就是它上面的一层。
所以React的作用是什么呢？抽象的说，它能帮助你在编写程序时可预测的操作复杂的Host tree，并且对像交互，网络响应，定时器等等这样的外部事件作出反应。

当专门的工具通过特定的约束获取收益，他就比一般的工作优秀。React通过下面的两项原则实现：

• 稳定：host tree相对来说比较稳定，大部分的更新不会改变整个结构。。如果一款app经常用完全不同的组合改变交互元素，它会比较难用的。按钮去哪了呢？为什么我的屏幕会跳动？
• 有规律的： Host tree 可以将拆分成不同的UI组件但表现一致，而不是不同的形状。

这些原则恰好适用于大多数 UI 。 然而，当输出没有稳定的“模式”时 React 并不适用。例如，React 也许可以帮助你编写一个 Twitter 客户端，但对于一个 3D 管道屏幕保护程序 并不会起太大作用。

2.Host Instances（宿主实例）

由节点构成的host tree 我们称为Host Instances。
在Dom环境中，宿主实例就是一般的DOM节点——就像你使用document.createElement('div')方法时所得到的对象。在 iOS 中，宿主实例可以是从 JavaScript 到原生视图唯一标识的值。
宿主实例有它们的属性，他们也有可能将其他的宿主实例作为子项。
一般会有API操作宿主的实例。。比如Dom提供了像appendChild， removeChild， setAttribute等等的API。在React中一般都不使用这些API，因为都有React来做。

3.render

渲染器(render)教会 React 如何与特定的宿主环境通信以及如何管理它的宿主实例。React DOM、React Native 甚至 Ink 都可以称作 React 渲染器。你也可以创建自己的 React 渲染器 。

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

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

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

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