React 回忆录（二）为什么使用 React？

2024年3月21日 132次阅读 来源: libinfs

Hi 各位，欢迎来到 React 回忆录！👋 在本章中，我将介绍 React 框架的五大特点：虚拟DOM，组件化，声明式代码，单向数据流和纯粹的JavaScript语法。但在介绍这五大特点之前，让我们先简要说明一下 React 出现的时代背景。

01. React 出现的时代背景

世界上的事情都有因才有果，一个框架的出现也必然离不开特定的时代背景。而对于 React 而言，不得不提的时代背景主要有这么两条：

  1. 大量业务逻辑由后端实现改为前端实现：AJAX技术的出现促使人们追求更流畅的Web交互体验，使得大量复杂的业务逻辑从后端开发改为由前端开发实现，这使得前端代码量呈几何式增加，量变引起质变，如何组织管理这种量级的前端代码？如何更好的提升应用性能？借鉴几十年来后端开发的经验，毫不意外，答案是使用大型前端框架。
  2. 对于逻辑复杂的SPA应用，原有前端框架性能不佳：在 React 问世之前，已经有 backbone.js 与 Angular.js 等成熟的大型前端框架了，然而 Facebook 的工程师们发现，在面对复杂的业务场景（例如：频繁操作DOM）时，这些框架都无法带来良好的页面性能，于是他们打算着手自己开发一个框架解决这一问题，所开发出的框架即是 React，而对于这一问题的解决方案则是：使用虚拟 DOM。

02. 虚拟 DOM

虚拟 DOM 的思想其实并不难理解：我们知道频繁的 DOM 操作会导致浏览器对 DOM 树进行大量计算，这是前端最重要的性能瓶颈。因此，只要我们能够合并多次的 DOM 操作，然后“毕其功于一役”，适时的，一次性的对 DOM 树集中进行一次操作，就可以大大提升前端性能。

对于 React 而言，实现这一思路的方案即是使用 虚拟 DOM。我们所谓的 DOM 树其实就是一个树状结构嵌套的 JavaScript 对象。而在浏览器中，DOM 树的改动会造成浏览器一系列的计算，因此我们可以基于现有的 DOM 树结构，克隆出一份一模一样的 DOM 树，即“虚拟 DOM ”，将所有的改动都实现在这棵虚拟 DOM 上，然后统一合并至浏览器中的 DOM 树中以解决之前所提到的性能瓶颈。

虽然理解起来不难，但在这个过程中其实牵扯到很多复杂的情况以及一些算法上的难点，足够开一篇新的文章讲解，在这里就先点到为止，就此不表了。

03. 什么是组件化？

组件化是一种代码设计模式，它表现为你能够将一些简单的函数构建为一个更加复杂的函数加以使用。

组件化有两个显著的特点：

  1. 封装：一个组件所需的数据封装于组件内部；
  2. 组合：一个组件可以与其他组件通过组合的方式实现更加复杂的业务逻辑；

而 React 最棒的一点就在于在 React 中一切 UI 元素皆是组件，而组件又只是一个 JavaScript 函数。但是相较于传统函数接收一些参数并返回一个值的模式而言，React 函数将会接收一些参数，返回界面中的 UI 元素。

正如一个好的函数应该符合“DOT”（Do One Thing）原则，一个好的 React 组件也不能混杂其他组件的业务逻辑，我们应该尽量让 React 组件保持简单，从而让复杂的 React 组件的内部逻辑变得清晰。

下面这个公式可以很好的表达在 React 中“视图是对数据的渲染”的组件化思想：

UI = render(data)

这样一来，在 React 中，构成复杂视图的方式就变得很简单：组合组件；

04. 声明式代码

声明式代码指的是：让开发者按照“我要做什么”，而不是“我要让计算机做什么”去思考如何实现业务需求。

让我们简单比较一下“声明式代码”与“命令式代码”的不同：

  • 命令式代码：
    感受到天气太热，编写代码：

    1. 拿起空调遥控器；
2. 打开空调；
3. 设置温度为 27 摄氏度；

  • 声明式代码：
    感受到天气太热，编写代码：

    1. 调用“开空调(27)”函数；

看起来，声明式代码不过是对封装了的命令式代码进行调用，但本质上，这是一种更棒的编程思维，它能够让我们不再仅仅着眼于如何通过代码实现功能，而是更多的思考为了实现业务逻辑，代码需要哪些功能（函数），对功能的设计，和功能之间的关系的思考，让我们的代码逻辑更加清晰，富有秩序。

05. 单向数据流

在 React 中，数据的组织形式是树状的，由上至下单向流动（对应DOM树），之所以这样设计，是因为：数据流更清晰，组件的状态就更可控；

对于业务逻辑复杂的单页面应用而言，前端所承接的数据量很大，数据之间的关系也错综复杂，再加上 React 采用组件式开发，不同 UI 根据不同数据产生变化，如果没有一个清晰，合理的数据流管理方式，最后的代码只能是一团糟，一旦 UI 或数据出现错误将很难排查出错源到底在哪。

有鉴于此，React 使用“单向数据流”的方式，只允许数据从父元素流至子元素。

React 单向数据流的机制大致如下：数据被存储在父级组件上，并且向下流动至子组件。虽然数据存储在父级组件上，但是父级与子级的组件都可以使用这个数据。但是，如果数据需要更新，那么只有父级组件应该去更新，如果子组件需要修改数据，他也只能通过发送更新的数据给父级组件，那里才是数据被真正更新的地方。一旦数据被父级组件更新了，子级组件将会接收到新的数据。

单向数据流虽然听起来增加了额外的工作量，但是却使开发者更容易搞清楚应用是如何工作的。

06. 纯粹的JavaScript语法

我们很容易就忽视 React 的这一特点，即在 React 中，没有任何特殊的专有的 React 语法需要理解和记忆，所有的组件，数据操作，业务逻辑都是通过使用 JavaScript 语法实现的。

这意味着你想要使用 React 只需理解 React 的思想和几个关键的 API 就可以立即开始使用 React 进行复杂应用的开发。并且 React 还鼓励你使用函数式编程思想进行开发，你可以在 React 开发中，使用你的任何函数式编程技巧。

07. 小结

到这里，《React 回忆录》第二章的部分就结束了，在本章中我们先谈到了 React 框架产生的时代背景，接着解释了 React 的五大特点：

  1. 虚拟 DOM；
  2. 组件化；
  3. 声明式代码；
  4. 单向数据流；
  5. 纯粹的 JavaScript 语法；

希望各位有所收获，如果有任何问题或建议，也欢迎各位在评论区内留言，下一章见 🙌

PS：🔊如果你对该专题感兴趣，别忘了订阅本专栏，确保及时收到更新通知。记得点击下方👇的各个按钮，让我知道你认可我的付出，这是激励我持续产出的动力和源泉 😎。

下个章节见 🎉 🙌 👋！

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