跳到主要内容

1 篇博文 含有标签「前端」

查看所有标签

React 框架的使用体验

· 阅读需 6 分钟

为什么学​

每次学习新技术，我都习惯问自己这个问题。那么，换一句话说，我们为什么需要借助框架来完成前端开发（而不是 vanilla JS）？以下是 chatgpt-4o 对这个问题的回答：

从更底层的角度来看，前端框架解决了开发过程中一些核心的复杂性和挑战。以下是几个关键方面：

  1. DOM 操作的抽象 ：

  • 原生 JavaScript ：直接操作 DOM 通常需要编写大量代码，且容易出错。例如，创建、插入、删除和修改 DOM 元素需要详细处理每个步骤，这在复杂应用中会变得难以维护。

  • 框架 ：通过抽象层（如虚拟 DOM），框架简化了 DOM 操作。例如，React 的虚拟 DOM 机制会在状态变化时高效地更新实际 DOM，而开发者只需关注状态的变化和 UI 的呈现。

  1. 状态管理 ：

  • 原生 JavaScript ：管理复杂应用的状态可能需要大量的事件处理和全局变量，容易导致代码混乱和难以调试。

  • 框架 ：提供了系统化的状态管理方案。例如，Redux 和 Vuex 等状态管理库帮助开发者集中管理应用状态，使得状态变化更可预测、更易调试。

  1. 组件化开发 ：

  • 原生 JavaScript ：复用 UI 组件通常需要手动编写和管理，难以保证组件的独立性和复用性。

  • 框架 ：提供了组件化开发的基础设施。开发者可以创建独立的、可复用的组件，这些组件可以在不同的地方使用，并且易于维护和扩展。

  1. 数据绑定 ：

  • 原生 JavaScript ：实现数据绑定（即数据变化自动反映在 UI 上）需要手动编写代码，通常通过事件监听和 DOM 操作来实现。

  • 框架 ：例如，Vue 的双向数据绑定机制和 React 的单向数据流，使得数据和 UI 同步更加直观和简单，减少了手动更新 DOM 的繁琐工作。

  1. 模块化与依赖管理 ：

  • 原生 JavaScript ：管理代码模块和依赖关系通常需要借助外部工具（如 Webpack），且需要手动配置和管理。

  • 框架 ：许多框架自带模块化和依赖管理系统。例如，Angular 内置的模块化系统和依赖注入机制，使得代码组织和依赖管理更加简便。

  1. 性能优化 ：

  • 原生 JavaScript ：手动优化性能通常需要深入了解浏览器的工作原理和具体的性能瓶颈。

  • 框架 ：例如，React 的虚拟 DOM 和 Vue 的渐进式增强机制，帮助开发者自动处理许多性能优化问题，使得应用更加高效。

  1. 开发工具和生态系统 ：

  • 原生 JavaScript ：虽然有许多开发工具可以使用，但需要单独配置和集成。

  • 框架 ：通常提供了一整套开发工具和生态系统。例如，React 开发者工具、Vue CLI 等，帮助开发者快速搭建、调试和部署应用。

通过这些底层机制，前端框架解决了许多原生 JavaScript 开发中的复杂问题，使得开发流程更加高效、代码更加健壮和可维护。

我的感受：前端 JS 最烦人的就是 dom 操作，非常频繁且 api 写法冗长。前端框架把人从 dom 操作中解脱出来，只要关注数据的变化即可。还有一个就是组件化开发，html 的树状结构意味着一定有很多功能相同的节点，这意味着需要抽取出来作为组件，这一点在 JS 中同样不好实现。

在前端领域，各个方向的工具的选择项都非常丰富。然而，在框架层面，就是 React 和 Vue（暂不讨论 Angular 和 Svelte）。客观上讲，这两个无优劣之分，只有适合与否。React 在海外的流行程度应该远超过 Vue。另外，我的感受是，渲染数据时，在 JavaScript 中写 HTML（React）比在一个框架定义的类 html 模板里更顺手，后者需要记住自定义的标签。

React 是框架吗​

严格上来说，React 不是框架。因为 react 并没有针对前端项目的一个完整解决方案（包括路由、状态管理等）。Vuejs 作为 React 的竞争对手，就是一个开箱即用的框架。

react 的核心就是 react 和 react-dom 两个库。