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供应了像appendChildremoveChildsetAttribute等等的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 类型。

    原文作者:lllluull
    原文地址: https://segmentfault.com/a/1190000018172163
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞