React 回忆录（二）为何使用 React？

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

下个章节见 🎉 🙌 👋！