将React当做前端UI运行时环境来看待

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

我曾经写过关于构建[用户界面][1]会遇到的难题一文。但是本篇文章将以一种不同的方式来讲述 React — 因为它更像是一种编程运行时。

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

注意：如果你还在学习 React ，请移步到官方文档进行学习

⚠️

本篇文章将会非常深入 — 所以并不适合初学者阅读。 在本篇文章中，我会从最佳原则的角度尽可能地阐述 React 编程模型。我不会解释如何使用它 — 而是讲解它的原理。

文章面向有经验的程序员和那些使用过其他 UI 库但在项目中权衡利弊后最终选择了 React 的人，我希望它会对你有所帮助！

许多人成功使用了 React 多年却从未考虑过下面我将要讲述的主题。 这肯定是从程序员的角度来看待 React ，而不是以设计者的角度。但我并不认为站在两个不同的角度来重新认识 React 会有什么坏处。

话不多说，让我们开始深入理解 React 吧！

宿主树

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

React 程序通常会输出一棵会随时间变化的树。 它有可能是一棵 DOM 树，iOS 视图层，PDF 原语，又或是 JSON 对象。然而，通常我们希望用它来展示 UI 。我们称它为“宿主树”，因为它往往是 React 之外宿主环境中的一部分 — 就像 DOM 或 iOS 。宿主树通常有它自己的命令式 API 。而 React 就是它上面的那一层。

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

当专业的工具可以施加特定的约束且能从中获益时，它比一般的工具要好。React 就是这样的典范，并且它坚持两个原则：

稳定性。 宿主树是相对稳定的，大多数情况的更新并不会从根本上改变其整体结构。如果应用程序每秒都会将其所有可交互的元素重新排列为完全不同的组合，那将会变得难以使用。那个按钮去哪了？为什么我的屏幕在跳舞？
通用性。 宿主树可以被拆分为外观和行为一致的 UI 模式（例如按钮、列表和头像）而不是随机的形状。

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

宿主实例

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

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

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

（这和 React 没有任何联系 — 因为我在讲述宿主环境。）

通常会有原生的 API 用于操控这些宿主实例。例如，在 DOM 环境中会提供像 appendChild、removeChild、setAttribute 等一系列的 API 。在 React 应用中，通常你不会调用这些 API ，因为那是 React 的工作。

渲染器

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

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

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

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

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

React 元素

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

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

``` // JSX 是用来描述这些对象的语法糖。 //

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

就像宿主实例一样，React 元素也能形成一棵树：

``` // JSX 是用来描述这些对象的语法糖。 // { type: 'dialog', props: { children: [{ type: 'button', props: { className: 'blue' } }, { type: 'button', props: { className: 'red' } }] } } ```

(注意：我省略了一些对此解释不重要的[属性][2])

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

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

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

入口

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

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

``` ReactDOM.render( // { type: 'button', props: { className: 'blue' } }

当我们调用 ReactDOM.render(reactElement, domContainer) 时，我们的意思是：“亲爱的 React ，将我的 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 会在第一次渲染中递归地为它们创建宿主实例。

协调

如果我们用同一个 container 调用 ReactDOM.render() 两次会发生什么呢？

``` ReactDOM.render(

同样的启发式方法也适用于子树。例如，当我们在

中新增两个

); }

</div>

它返回一对值：当前的状态和更新该状态的函数。

数组的<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring" target="_blank" rel="nofollow noopener noreferrer">解构语法</a>让[我们](https://www.w3cdoc.com)可以给状态变量自定义名称。例如，我在这里称它们为 count 和 setCount ，但是它们也可以被称作 banana 和 setBanana 。在这些文字之下，[我们](https://www.w3cdoc.com)会用 setState 来替代第二个值无论它在具体的例子中被称作什么。

_(你能在 <a href="https://reactjs.org/docs/hooks-intro.html" target="_blank" rel="nofollow noopener noreferrer">React 文档</a> 中学习到更多关于 useState 和 其他 Hooks 的知识。)_

## 一致性 {#一致性}

即使[我们](https://www.w3cdoc.com)想将协调过程本身分割成<a href="https://www.youtube.com/watch?v=mDdgfyRB5kg" target="_blank" rel="nofollow noopener noreferrer">非阻塞</a>的工作块，[我们](https://www.w3cdoc.com)仍然需要在同步的循环中对真实的宿主实例进行操作。这样[我们](https://www.w3cdoc.com)才能保证用户不会看见半更新状态的 UI ，[浏览器](https://www.w3cdoc.com)也不会对用户不应看到的中间状态进行不必要的布局和样式的重新计算。

这也是为什么 React 将所有的工作分成了”渲染阶段“和”提交阶段“的原因。_渲染阶段_ 是当 React 调用你的组件然后进行协调的时段。在此阶段进行干涉是安全的且在<a href="https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html" target="_blank" rel="nofollow noopener noreferrer">未来</a>这个阶段将会变成异步的。_提交阶段_ 就是 React 操作宿主树的时候。而这个阶段永远是同步的。

## 缓存 {#缓存}

当父组件通过 setState 准备更新时，React 默认会协调整个子树。因为 React 并不知道在父组件中的更新是否会影响到其子代，所以 React 默认保持一致性。这听起来会有很大的性能消耗但事实上对于小型和中型的子树来说，这并不是问题。

当树的深度和广度达到一定程度时，你可以让 React 去<a href="https://en.wikipedia.org/wiki/Memoization" target="_blank" rel="nofollow noopener noreferrer">缓存</a>子树并且重用先前的渲染结果当 prop 在浅比较之后是相同时：

<div class="gatsby-highlight" data-language="jsx">

function Row({ item }) { // … }

export default React.memo(Row);

</div>

现在，在父组件 <Table> 中调用 setState 时如果 <Row> 中的 item 与先前渲染的结果是相同的，React 就会直接跳过协调的过程。

你可以通过 <a href="https://reactjs.org/docs/hooks-reference.html#usememo" target="_blank" rel="nofollow noopener noreferrer">useMemo() Hook</a> 获得单个表达式级别的细粒度缓存。该缓存于其相关的组件紧密联系在一起，并且将与局部状态一起被销毁。它只会保留最后一次计算的结果。

默认情况下，React 不会故意缓存组件。许多组件在更新的过程中总是会接收到不同的 props ，所以对它们进行缓存只会造成净亏损。

## 原始模型 {#原始模型}

令人讽刺地是，React 并没有使用“反应式”的系统来支持细粒度的更新。换句话说，任何在顶层的更新只会触发协调而不是局部更新那些受影响的组件。

这样的设计是有意而为之的。对于 web 应用来说<a href="https://calibreapp.com/blog/time-to-interactive/" target="_blank" rel="nofollow noopener noreferrer">交互时间</a>是一个关键指标，而通过遍历整个模型去设置细粒度的监听器只会浪费宝贵的时间。此外，在很多应用中交互往往会导致或小（按钮悬停）或大（页面转换）的更新，因此细粒度的订阅只会浪费内存资源。

React 的设计原则之一就是它可以处理原始数据。如果你拥有从网络请求中获得的一组 JavaScript 对象，你可以将其直接交给组件而无需进行预处理。没有关于可以访问哪些属性的问题，或者当结构有所变化时造成的意外的性能缺损。React 渲染是 O(_视图大小_) 而不是 O(_模型大小_) ，并且你可以通过 <a href="https://react-window.now.sh/#/examples/list/fixed-size" target="_blank" rel="nofollow noopener noreferrer">windowing</a> 显著地减少视图大小。

有那么一些应用细粒度订阅对它们来说是有用的 — 例如股票代码。这是一个极少见的例子，因为“所有的东西都需要在同一时间内持续更新”。虽然命令式的方法能够优化此类代码，但 React 并不适用于这种情况。同样的，如果你想要解决该问题，你就得在 React 之上自己实现细粒度的订阅。

**注意，即使细粒度订阅和“反应式”系统也无法解决一些常见的性能问题。** 例如，渲染一棵很深的树（在每次页面转换的时候发生）而不阻塞[浏览器](https://www.w3cdoc.com)。改变跟踪并不会让它变得更快 — 这样只会让其变得更慢因为[我们](https://www.w3cdoc.com)执行了额外的订阅工作。另一个问题是[我们](https://www.w3cdoc.com)需要等待返回的数据在渲染视图之前。在 React 中，[我们](https://www.w3cdoc.com)用<a href="https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html" target="_blank" rel="nofollow noopener noreferrer">并发渲染</a>来解决这些问题。

## 批量更新 {#批量更新}

一些组件也许想要更新状态来响应同一事件。下面这个例子是假设的，但是却说明了一个常见的模式：

<div class="gatsby-highlight" data-language="jsx">

function Parent() { let [count, setCount] = useState(0); return ( <div onClick={() => setCount(count + 1)}> Parent clicked {count} times

function Child() { let [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Child clicked {count} times ); }

const [counter, dispatch] = useReducer((state, action) => { if (action === ‘increment’) { return state + 1; } else { return state; } }, 0);

function handleClick() { dispatch(‘increment’); dispatch(‘increment’); dispatch(‘increment’); }

const ThemeContext = React.createContext( ’light’ // 默认值作为后备 );

function DarkApp() { return ( <ThemeContext.Provider value=“dark”> </ThemeContext.Provider> ); }

function SomeDeeplyNestedChild() { // 取决于其子组件在哪里被渲染 const theme = useContext(ThemeContext); // … }

useEffect(() => { DataSource.addSubscription(handleChange); return () => DataSource.removeSubscription(handleChange); });

useEffect(() => { DataSource.addSubscription(handleChange); return () => DataSource.removeSubscription(handleChange); }, []);

useEffect(() => { DataSource.addSubscription(handleChange); return () => DataSource.removeSubscription(handleChange); }, [handleChange]);

function MyResponsiveComponent() { const width = useWindowWidth(); // 我们自己的 Hook return (

// 😉 注意：并不是真的语法 component Example(props) { const [count, setCount] = use State(0); return (

component Example() { if (condition) { // 要是 condition 是 false 时会发生什么呢？ const [count, setCount] = use State(0); }

function handleClick() { // 要是离开了组件函数会发生什么？ // 这和一般的变量又有什么区别呢？ const [count, setCount] = use State(0); }

// 😉 注意：并不是真的语法 component Example(props) { // 只在这里有效 const [count, setCount] = use State(0);

if (condition) { // 这会是一个语法错误 const [count, setCount] = use State(0); }

// 伪代码 let hooks, i; function useState() { i++; if (hooks[i]) { // 再次渲染时 return hooks[i]; } // 第一次渲染 hooks.push(…); }

// 准备渲染 i = -1; hooks = fiber.hooks || []; // 调用组件 YourComponent(); // 缓存 Hooks 的状态 fiber.hooks = hooks;

将React当做前端UI运行时环境来看待

宿主树

宿主实例

渲染器

React 元素

入口

协调

条件

控制反转

Please login

人工客服

工单服务

投诉建议

将React当做前端UI运行时环境来看待

宿主树 #

宿主实例 #

渲染器 #

React 元素 #

入口 #

协调 #

人工客服

工单服务

投诉建议

宿主树

宿主实例

渲染器

React 元素

入口

协调