Module 01 · Introduction to React and Class ComponentsReact 与类组件简介

Introduction to Front-End Frameworks and React前端框架与 React 介绍课程

欢迎来到 前端框架与 React 介绍 课程！通过观看此视频，你将能够：

了解库与框架

如今，开发者广泛采用 React 来构建现代网页应用。但是在深入了解 React 之前，我们需要先理解库（Library）和框架（Framework）的基本概念。你将频繁地在软件开发中使用这些工具，它们各自具有独特的作用和目的。

库是一组预先编写好的代码段，提供可重用的功能和例程，供其他程序或应用程序使用。这些库通常针对特定的任务或功能，允许开发者根据需要将它们集成到自己的代码中。

一些常见的 JavaScript 库示例包括：

框架是一个全面的软件开发平台，提供构建完整应用程序的基础和结构。与只提供特定功能的库不同，框架规定了特定的架构，并提供工具、库和指南来简化开发过程。框架解决更广泛的问题，包括处理用户请求、管理数据流和构建应用程序的整体架构。

一些流行的 JavaScript 框架包括：

在网页开发中，专门用于构建网页用户界面的框架被称为 前端框架。这些框架利用 HTML、CSS 和 JavaScript 等技术，创建动态、互动的用户界面，UI 通过与后台服务器的通信来进行交互。

一些流行的前端框架包括：

React 是由 Meta（Facebook 和 Instagram 的母公司）开发的一个开源 JavaScript 库。它使得构建动态和互动的用户界面变得更加容易。React 的主要特点包括：

React 的灵活组件化架构使得创建可重用的 UI 元素变得非常方便。开发者通过构建 独立组件 来表示网页的不同功能。例如，开发者可以将一个网站分成头部、左右侧边栏 或页脚等组件。通过这种模块化方法，开发者能够将 UI 功能封装在独立的文件中，从而在多个页面中重复使用这些组件，而不需要重复编写代码。

React 使用 声明式语法，当数据或状态发生变化时，React 会自动更新 UI 的表现。声明式编程使得开发者只需要指定 UI 应该如何变化，而 React 会高效地管理底层的 DOM（文档对象模型）。简而言之，开发者告诉 React 做什么，而不是 如何做。

React 使用 虚拟 DOM 来优化性能，而不是直接操作实际的 DOM。每当组件中的内容发生变化时，React 会生成虚拟 DOM 的副本，并将其与真实 DOM 进行比较，只更新必要的部分。这一策略通过减少不必要的 DOM 修改，提升了性能和速度。

React 使用 JSX，即 JavaScript 的一种语法扩展，允许在 JavaScript 代码中编写类似 HTML 的代码。JSX 使得创建和可视化 UI 组件变得更加简单，它将 HTML 和 JavaScript 无缝集成在一起。

React 引入了 Hooks 功能（自 React 16.8 起），它允许开发者更轻松地处理组件的状态和其他 React 功能，从而不再需要使用基于类的编写方式。Hooks 简化了组件逻辑，促进了代码重用，并使得管理状态变得更加便捷。

在本视频中，你了解了以下内容：

库提供可重用的代码组件，而框架提供构建应用程序的全面结构。
前端框架 专注于构建网页应用的用户界面。
React 是由 Meta 开发的开源 JavaScript 库，便于构建动态和互动的用户界面，主要特点包括：组件化架构、声明式语法、虚拟 DOM 优化、单向数据绑定、JSX 集成 和 React Hooks 功能。

通过本视频，你对 React 的核心概念和功能有了初步的了解。接下来，你将进一步学习如何在实际开发中运用这些知识！ 🎉