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

2023年10月21日 195次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞