缺少 React 简介

React 是一个由 Facebook 创建和维护的热门高性能 UI 库。React 可用于构建单页应用，也可用于构建移动应用。但这并不意味着它很酷。正因为它很酷，它才流行。大多数 React 介绍都跳过了“为什么”的介绍，直接开始提供如何使用 React 的示例。

它的核心概念简单易懂，一个下午就能学会，但要精通则需要多年的实践。这很棒。如果你想立即深入研究并开始尝试 React，官方文档包含许多工具可以帮助你入门。

这篇文章是为那些对 React 的原理感到好奇的人准备的。React 的工作原理是什么？

为什么要做出反应？

React 常用于设计单页应用程序 (SPA) 的 UI。它对桌面和移动应用都大有裨益。Facebook、Bloomberg、Airbnb、Instagram 和 Skype 只是使用基于 React JS 的 React Native 框架的众多网站中的一小部分。React 是快速构建 UI 应用程序的热门替代方案，因为它是由社区驱动的。

React 可以与任何 JavaScript 框架一起使用，但它通常与 Flux 或 Redux 等框架搭配使用。这些框架有助于在构建大型应用程序时更轻松地使用 React。

当 UI 组件不感知网络、业务逻辑或应用状态时，运行起来会更容易。每次传入相同的 props 时，渲染完全相同的信息。

React 在最初发布时彻底改变了 JavaScript 库的运行方式。当其他开发者还在推广 MVC、MVVM 等架构时，React 却选择将视图渲染与模型表示分离。Flux 是 React 为 JavaScript 前端生态系统引入的全新架构。

虚拟DOM

在 React 中，每个 DOM 项都有一个等效的“虚拟 DOM 对象”。虚拟 DOM 对象是 DOM 对象的表示形式，类似于薄副本。它比真实 DOM 更快，用于在将应用程序发送到浏览器之前进行渲染。它还用于计算新旧 DOM 之间的差异，因此您可以只更新已更改的内容。

让我们讨论一下虚拟 DOM 如何真正加速进程。

每当程序引入新内容时，都会构建一个虚拟 DOM，并以树的形式呈现。这棵树上的一个节点代表程序的每个组件。因此，每当任何元素的状态发生变化时，都会构建一个新的虚拟 DOM 树。然后，会将之前的虚拟 DOM 树与新的虚拟 DOM 树进行比较，并记录任何差异。之后，会确定对真实 DOM 进行这些修改的最佳方法。只有更改的项目才会再次显示在页面上。

声明式编程

声明式编程是一种指定计算机执行“什么”而不是“如何”的方式。在命令式编程中，我们通常会指定“如何”执行，但指定“什么”也很有用。例如，当我们使用 React 构建应用程序并使用 JSX 和类似 HTML 的语法定义一个按钮时：

jsx
Click Me!

我们描述的是按钮的标题（“点击我！”）及其用途（点击）。我们不需要告诉 React 如何“点击”——React 已经为我们完成了这项工作。这使得我们的代码更容易被理解，因为它关注的是应该发生什么，而不是应该如何发生（这可能会很复杂）。

单向数据流

单向数据流是 React 中自带的一个概念。它非常重要，如果你想理解 React 为何如此快速，你应该阅读本节。单向数据流很容易让人混淆，因为与其他模型相比，它看起来并不多。单向数据流背后的主要思想是，应用程序的状态只有两个方向：沿着组件层次结构向上和向下，但不能再返回（同一方向）。

单向数据流有助于实现多个目标。首先，它使应用程序的推理更加容易；因为所有操作都发生在一个方向上，您无需担心多个组件如何交互，也不必担心某些事件是否会在应用中的其他地方引发意外的副作用。此外，单向性使调试更加容易，因为您可以轻松追踪每条信息在任何给定时间是如何进入状态的。

最后，也许是最重要的一点，单向性允许 React 根据事件发生后 DOM 的哪些部分需要更新来优化其渲染过程，从而帮助提高性能；如果树中某个较高位置的元素发生变化，而该位置很少有元素依赖于它的值（例如另一个组件），那么当这些元素只关心它们的直接父级时，它们就不会不必要地重新渲染自己！

React 的函数式范式

React 采用函数式范式，这意味着它鼓励使用函数而非对象。与其他流行框架不同，React 没有任何内置的状态管理。相反，它依赖于你自行管理状态，并使用不可变性来防止数据更改时代码崩溃。这听起来可能没什么，但随着你学习本课程的深入，你将更详细地了解如何使用这些功能。

无状态组件

无状态组件更易于测试、重用和推理。它们也更易于重构、理解和调试。

高阶组件

高阶组件是一种通过为组件包装附加功能来实现代码复用的方法。HOC 通常用于实现组件本身无法实现的有状态行为，有助于模拟 API 或管理复杂状态。HOC 还可以用作实现 React Context API 的一种机制。

看起来 REACT 是您项目的正确选择，因为与使用其他 UI 库相比，它带来了多种好处。

React 似乎是您的项目的正确选择，因为与使用其他 UI 库相比，它带来了多种好处。

• 它是一个 JavaScript 库，因此您无需学习其他语言即可使用它。
• React 占用空间小，易于集成到您的项目中。

然而，有些事情使得 React 不太理想：

• 其背后的社区规模比 Angular 或 VueJS 要小，但这并不会影响性能或易用性（除非代码中存在错误）。
• 它最初由 Facebook 开发用于内部使用，因此其设计决策可能并不适合其他所有人（但随着更多人为项目做出贡献，这些问题可能会得到解决）。

考虑以下示例：
我们的想法是让属性在组件的界面上可用，但在包装在 HoC 中时为组件的消费者剥离这些属性。

export function withTheme<T extends WithThemeProps = WithThemeProps>(
    WrappedComponent: React.ComponentType<T>
) {
    // Try to create a nice displayName for React Dev Tools.
    const displayName =
        WrappedComponent.displayName || WrappedComponent.name || "Component";

    // Creating the inner component. The calculated Props type here is the where the magic happens.
    const ComponentWithTheme = (props: Omit<T, keyof WithThemeProps>) => {
        // Fetch the props you want to inject. This could be done with context instead.
        const themeProps = useTheme();

        // props comes afterwards so the can override the default ones.
        return <WrappedComponent {...themeProps} {...(props as T)} />;
    };

    ComponentWithTheme.displayName = `withTheme(${displayName})`;

    return ComponentWithTheme;
}

结论

React 确实有很多值得称道的地方。除了 Facebook、Instagram 及其旗下其他服务在生产环境中使用之外，React 还被 Netflix、Yahoo! 等公司采用。凭借这些支持，React 必将在未来数年内蓬勃发展。

就这样

感谢您耐心阅读至今。如果您喜欢这篇文章，并希望帮助我们传播，请点赞几次，让我们一起分享。关注我的领英(Linkedin)即可随时了解最新动态。