TNotes.react

Appearance

to top

0032. react 是什么 ​

1. 📝 概述 ​

  • 知识点：
    • 了解 react 是什么
    • 了解 react 都有哪些特点
    • 了解 vue、react 之间的一些差异
    • 理解为什么强调 react 是一个库，而非框架

2. 🤔 react 是什么 ​

  • React 是由 Facebook 研发的、用于 解决 UI 复杂度 的开源 JavaScript 库，目前由 React 联合社区维护。
  • React 不是框架，只是为了解决 UI 复杂度而诞生的一个库。
    • 只不过我们平时在提到 react 时，往往会将其称之为前端框架。
  • 官方定义：
    • The library for web and native user interfaces
    • 用于构建 Web 和原生交互界面的库
1
2

3. 📒 react 的特点 - 轻量 ​

  • React 的开发版（也就是 development 版本）所有源码（包含注释）仅 3k 行左右。
    • 图 2
  • React 的运行版（也就是 production 版本）所有源码体积仅 7KB 左右。
    • 图 3
  • 上述截图的内容，你可以使用 vite 来快速搭建一个 react 工程，然后到 node_modules 中查看。
    • 你可以使用 pnpm create vite 命令来快速创建一个 react 工程，目前 2024 年 11 月 4 日 23:07:41 创建的 react 的最新版本是 "version": "18.3.1"。若你想要验证上述描述是否准确，可以自行创建一个工程来瞅一瞅。

4. 📒 react 的特点 - 原生 ​

  • 原生
    • 所有的 React 的代码几乎都是用原生 JS 书写而成的，不依赖其他任何库。
  • 不依赖宿主环境
    • React 只依赖原生 JS 语言，几乎不依赖任何其他库，同时也没有具体的运行环境依赖，比如没有浏览器宿主环境下的 window，document 访问。因此，它可以被轻松的移植到浏览器、桌面应用（如使用 Electron）、移动端（如 React Native）。
  • 对比 vue
    • vue 一开始对宿主环境是有依赖的，在 vue 源码拆分出 vue-core 之前，它内部依赖了浏览器宿主环境下的 window、document，因为它在核心库中带有直接操作 DOM 的逻辑。但后来对架构做了调整，拆分出一个 vue-core 即 vue 的核心库，使其更加模块化，并减少对特定环境的依赖。现在 vue-core 里面是没有依赖具体的环境的，这使得 Vue 也能够在不同环境中使用，类似于 React 的设计理念，因此，vue 也可以被轻松的移植到浏览器、桌面应用、移动端。
    • Vue 的核心拆分和对宿主环境依赖的减少始于 Vue 2.x 版本。具体来说，Vue 2.5 版本引入了 vue-runtime 和 vue-core 的概念，将核心功能和运行时逻辑进行分离。这一变化使得 Vue 更加模块化，方便在不同的环境中使用。
    • 图 4
    • 🤔 如何验证上述描述？
      • 使用 pnpm i vue@2.4 下载一个 vue@2.4 版
      • 找到 node_modules/vue/dist/vue.runtime.common.js 文件（这是导入 vue 的入口文件）
      • 搜索 document 或者 window 看看，你会发现这里边对浏览器提供的 DOM API、BOM API 是有所依赖的。

5. 📒 react 的特点 - 灵活 ​

  • 易扩展
    • React 对代码的封装程度较低，也没有过多的使用魔法，所以 React 中的很多功能都可以扩展。
  • 渐近式
    • React 并非框架，对整个工程没有强制约束力。这对与那些已存在的工程，可以逐步的将其改造为 React，而不需要全盘重写。
  • jsx
    • 用 JS 代码声明界面，非常灵活。
  • 组件化
    • 这也是其他大多数框架所具备的特点。

6. 📒 react 的特点 - 单向数据流 ​

  • 所有的数据自顶而下的流动。
  • 这种模式使得状态数据的变化变得更为可控，管理起来也会更为简单。
  • 这也是其他大多数框架所具备的特点。

7. 📒 库 vs. 框架 ​

  • 🤔 思考：为什么官方特别强调 react 是一个库，而非框架呢？
  • 作为对比，我们可以先看看 vue 官方对 vue 的定义：
    • 图 5
    • 可以看到，官方明确表示，vue 是一个渐进式 JavaScript 框架。
  • 再来看看“库”和“框架”的定义：
    • 库 是一组预先编写的代码，用于解决特定的问题或提供特定的功能。库通常提供一组函数、类或对象，开发者可以在自己的代码中调用这些函数或对象。
    • 框架 是一组预先编写的代码，提供了一种结构化的解决方案，用于开发特定类型的应用程序。框架通常定义了一套规则和约定，开发者需要遵循这些规则来构建应用程序。
    • 会发现，从“定义”角度来看，我们不太好区分开“库”和“框架”这两个词。其实在前端领域，react、vue 的主要作用都是用于解决 UI 复杂度的问题，它们的作用是非常类似的。所以也会有不少人将它们统一称之为前端框架。其实也没必要死扣字眼，认定“react 是框架”这种说法是错误的，与其死扣字眼，不如想想官方特地这么强调可能有哪些用意。
  • 从 侵入性 角度来对比：
    • 库：开发者拥有 更多的控制权、更高的灵活性，可以自由地决定何时何地调用库中的功能，通常更适用于需要高度定制化和灵活性的项目。
    • 框架：框架控制了应用程序的流程，开发者需要按照框架的规则编写代码，因此会牺牲一部分的灵活性，你只需要按照框架约束的规则来走，即可获得一站式的解决方案，通常更适用于需要快速开发且愿意遵循框架规则的项目。
      • 框架的侵入性更强。
  • 回答最开始的思考题
    • 可以猜想一下，说 react 是一个库，说 vue 是一个框架，可能是想要表达：
      • react
        • 我只帮你做了一些必要的工作，帮你解决最核心的一些痛点问题，其余还有很多工作需要交给你自己去解决。
        • 不过我的侵入性很低，可以和很多其它库结合使用，虽然很多问题我没有去处理，但我的生态很强大，有很多库能够与我结合使用，帮你快速解决这些问题。
      • vue
        • 除了一些痛点问题之外，我还在想办法尽可能帮你解决更多的问题，让你写起来更便捷。比如，我们会事先明确好一些语法规则，你需要按照我们指定的规则来走，这意味着我的侵入性会更高一些，虽然这可能牺牲了一部分的灵活性，但在某些程度上确实能够让你写更少的代码就能解决很多常见问题。

8. 🔗 References ​

🫧 Discussions

991720ff-a379-47aa-970e-5dfa1298f8d6