摘要：我们称这些结构为，因为通常他们是之外宿主环境的一部份就像和。宿主实例由节点构成的我们称为。甚至都可以称作渲染器。这种模式适用于那些并不提供像的而是克隆双亲树并始终替换掉顶级子树的宿主环境。在宿主树级别上的不可变性使得多线程变得更加容易。
很多教程把React介绍为一个UI框架。这很合理因为它就是一个UI库，这就是react标语的意思。1 Host Tree
这篇文章不会叫你任何关于建立用户界面的知识，但是会帮助你更生层次的理解React编程模型。
这是一篇深入解析的文章，对初学者不太适合。在这篇文章我将通过第一准则描述大部分的React编程，我将解释react是如何工作的。
一些程序输出数字，另一些程序输出诗歌。不同的语言和他们的运行时通常会对特定的实例进行优化，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来做。
渲染器(render)教会 React 如何与特定的宿主环境通信以及如何管理它的宿主实例。React DOM、React Native 甚至 Ink 都可以称作 React 渲染器。你也可以创建自己的 React 渲染器 。
React 渲染器能以下面两种模式之一进行工作。
绝大多数渲染器都被用作“可变”模式。这种模式正是 DOM 的工作方式：我们可以创建一个节点，设置它的属性，在之后往里面增加或者删除子节点。宿主实例是完全可变的。
但 React 也能以”不变“模式工作。这种模式适用于那些并不提供像 appendChild 的 API 而是克隆双亲树并始终替换掉顶级子树的宿主环境。在宿主树级别上的不可变性使得多线程变得更加容易。React Fabric 就利用了这一模式。
作为 React 的使用者，你永远不需要考虑这些模式。我只想强调 React 不仅仅只是从一种模式转换到另一种模式的适配器。它的用处在于以一种更好的方式操控宿主实例而不用在意那些低级视图 API 范例。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/101728.html
摘要：元素在宿主环境中，一个宿主实例是最小的单位像节点。在中最小的单位是元素。他们总是不断的重建和销毁。元素是不可变的。比如，你不能改变一个元素的属性和其他属性。入口每一个渲染器都有一个入口。当我们说，就意味着亲爱的，将我的元素放到的宿主树去。 1、React元素 在宿主环境中，一个宿主实例是最小的单位（像DOM节点）。在React中最小的单位是React元素。一个React元素就是一个描述...
摘要：确定宿主树怎么样来响应新的信息的这个过程被称为协调。协调有两种方法。我们已经创建了一个作为第一个也是唯一一个子元素，并且我们希望在同一个地方再次渲染一个。这个已经与的思想非常接近了。 1.协调 如果我们在同一个容器中使用两次ReactDOM.render()会发生什么？ ReactDOM.render( , document.getElementById(container) ...
摘要：在上面我们已经知道浏览器是一帧一帧执行的，在两个执行帧之间，主线程通常会有一小段空闲时间，可以在这个空闲期调用空闲期回调，执行一些任务。另外由于这些堆栈是可以自己控制的，所以可以加入并发或者错误边界等功能。 文章首发于个人博客 前言 2016 年都已经透露出来的概念，这都 9102 年了，我才开始写 Fiber 的文章，表示惭愧呀。不过现在好的是关于 Fiber 的资料已经很丰富了，...
摘要：在探索抽象类前，先了解下如何在组件指令中获取这些抽象类。下面示例描述在组建模板中如何创建如同其他抽象类一样，通过属性绑定元素，比如上例中，绑定的是会被渲染为注释的元素，所以输出也将是。你可以使用查询模板引用变量来获得抽象类。 原文链接：Exploring Angular DOM manipulation techniques using ViewContainerRef如果想深入学习 ...
摘要：我们不想要因为重新创建元素而失去它的选中状态，聚焦状态和显示内容。幸好这个问题有一个简单的修复方式，他并不在应用中常见。那么会执行类似于下面的代码的状态并不会改变 如果React在更新中只重用与元素类型相匹配的宿主实例，那按渲染条件选择的内容怎么办呢？正如下面的代码，假如我们开始至需要一个input，但稍后需要在它之前渲染一个message ： // 第一次渲染 ReactDOM.re...
阅读 2434·2021-11-22 09:34
阅读 2990·2021-10-25 09:43
阅读 1947·2021-10-11 10:59
阅读 3297·2021-09-22 15:13
阅读 2300·2021-09-04 16:40
阅读 403·2019-08-30 15:53
阅读 3168·2019-08-30 11:13
阅读 2570·2019-08-29 17:30
