React 简介：核心概念、组件化架构与声明式编程

本文为《React Agent：从零开始构建 AI 智能体》专栏系列文章。专栏地址：https://blog.csdn.net/suiyingy/category_12933485.html。项目地址：https://gitee.com/fgai/react-agent（含完整代码示例与实战源）。完整介绍：https://blog.csdn.net/suiyingy/article/details/146983582。

在当今快速发展的 Web 开发领域，构建高效、可维护且用户体验出色的用户界面（UI）始终是开发者面临的核心挑战。传统的 DOM 操作方式虽然直接，但随着应用复杂度的提升，频繁的 DOM 操作会导致性能瓶颈，代码的可维护性也会急剧下降。2013 年，Facebook（现 Meta）开源了 React.js，这个专注于 UI 层的 JavaScript 库以其独特的组件化架构和声明式编程思想，彻底改变了前端开发的范式。经过十年的发展，React 已成为全球最受欢迎的前端框架之一，Stack Overflow 2024 年开发者调查显示，40.2% 的专业开发者在使用 React，其生态系统覆盖了 Web、移动、桌面甚至 VR 应用开发。截至 2025 年，React 最新稳定版为 18.3，新增并发模式、自动批处理等特性，持续引领前端技术发展。其官网地址为https://react.dev/。

图1 React 官网页面

React 核心理念是基于组件化和声明式编程，使得开发者能够以一种直观且高效的方式构建动态的 Web 应用程序。组件化将 UI 分解为独立可复用的单元，每个组件封装了自身的逻辑和视图，如同搭建积木般构建复杂界面。声明式编程则让开发者只需描述“UI 应该是什么样”，而非“如何实现变化”，React 会自动处理 DOM 更新的具体逻辑。这种思想解放了开发者的思维，将关注点从操作 DOM 转向管理数据状态，大大提升了开发效率。它专注于 UI 层，与其他框架（例如 Angular 和 Vue）不同，其并不提供完整的框架解决方案，而是鼓励通过组合第三方库和工具来完成特定需求。

下面是一个简单按钮点击程序，效果如下图所示。

function MyButton() {return (<button>I'm a button</button>);
}export default function MyApp() {return (<div><h1>Welcome to FGAI React Agent</h1><MyButton /></div>);
}

图2 React 示例效果

DOM 即文档对象模型（Document Object Model），它是一种用于表示 HTML 或 XML 文档的树形结构，让程序和脚本能够动态地访问和修改文档的内容、结构和样式。React 并不直接操作浏览器的 DOM，而是构建一个内存中的虚拟 DOM。在虚拟 DOM 中完成必要的操作后，它才将变化应用到实际的浏览器 DOM 上。这种方式极为高效，因为它仅对需要修改的部分进行变更，大大减少了直接操作 DOM 带来的性能损耗。举例来说，当一个列表项发生变化时，React 通过虚拟 DOM 的比对，仅更新该列表项对应的 DOM 部分，而非整个列表的 DOM 结构。

React 的关键特点如下。

1 基于组件的架构

React 允许将用户界面拆分为更小的、自包含的组件。组件是一种可复用的、独立的代码单元，可以封装 HTML、CSS 和 JavaScript，能够显著提高代码的可维护性和复用性。每个组件都可以拥有自己的状态（state）和属性（props）。以一个简单的导航栏组件为例，它可能包含自己的状态来控制菜单的展开与收起，同时通过属性接收来自父组件的链接信息等。这种组件化的方式使得代码的复用性大大提高，维护和更新也更加便捷。

2 JSX（JavaScript 语法扩展）

JSX 是 JavaScript 的一种语法扩展，开发者能够在 JavaScript 文件中编写类似 HTML 的代码。这使得 React 组件的代码可读性和表达性更强。例如：

const name = "FGAI React Agent";
const ele = <h1>Welcome to {name}</h1>;

这里通过 JSX，将 JavaScript 变量name嵌入到类似 HTML 的标签中，直观地创建了一个包含特定文本的标题元素。

3 虚拟 DOM（Virtual DOM）

如前所述，React 维护着一个轻量化的实际 DOM 的内存表示。当数据发生变化时，它会高效地更新 DOM 中真正需要改变的部分。这种机制避免了频繁地直接操作 DOM，提升了应用程序的性能。在一个实时聊天应用中，不断更新的聊天消息列表，通过虚拟 DOM，它能精准地只添加新消息对应的 DOM 元素，而不影响其他已存在的消息 DOM。

4 单向数据流

React 采用单向数据流（Unidirectional Data Flow），即数据从父组件传递到子组件。这样可以确保数据流向清晰，便于调试和状态管理。子组件通过属性（props）接收来自父组件的数据，但无法直接将数据返回给父组件。不过，子组件可以与父组件通信，根据提供的输入来修改父组件的状态。例如，在一个父子组件构成的表单场景中，父组件传递初始表单数据给子组件，子组件通过用户输入修改数据后，通过特定的回调函数通知父组件更新状态。

5 声明式编程

开发者只需要描述 UI 在不同状态下的样子，React 会自动处理 UI 更新的逻辑，而无需手动操作 DOM。他会自动处理 UI 更新的具体逻辑，比如如何查询 DOM 元素、如何更新元素的属性或内容、如何处理动画效果等。例如，在一个电商应用中，当用户将商品加入购物车时，开发者只需设定购物车图标旁的商品数量显示会相应增加，或者商品列表中的“加入购物车”按钮变为“已加入”状态等。