React

可以先理解为:用组件构建用户界面的JavaScript库

React 像把界面拆成一块块可复用零件。每个组件知道自己收到什么数据、当前是什么状态,然后声明自己应该显示成什么样。你不需要手动改每个 DOM 细节。

关键结构图

这一层

打开

下一层

继续

停下

一个页面框里嵌套 Header、CardGrid、CardItem、Button 等组件,箭头标出 props 和 state。

React 是用组件来构建用户界面的 JavaScript 库。

React 是一个用于构建用户界面的 JavaScript 库。它通过组件、props、state 和声明式渲染组织界面逻辑。它的边界是 UI 层库,不是完整应用框架;路由、数据、构建和部署通常需要其他工具配合。

StructureReact = 组件 + 状态 + 属性 + 声明式渲染

当界面包含多个可复用组件、交互状态、动态数据和复杂页面组合时,React 可以帮助组织 UI。

先把页面拆成组件,定义每个组件接收的 props 和内部状态。再让组件通过数据变化重新渲染,而不是手动拼接 DOM。

一个卡片列表可以拆成 CardGrid 和 CardItem,每张卡只关心自己的标题、摘要和行动。

一个表单组件用 state 记录输入、错误和提交状态,用户操作后界面自动根据状态变化。

类型:技术文档 / 前端工程

事实线:React 官方文档将 React 定义为用于构建 Web 和原生用户界面的库,核心是组件化和声明式 UI。

依据:React 官方文档、现代前端组件化实践。

边界:适合复杂交互和组件复用;简单静态页面未必需要引入 React。

常见误读:不要把 React 当成完整产品架构。它解决的是界面组织,不是全部工程问题。