一、这个技术是什么？

页面越来越复杂时，如果把所有 HTML、事件和数据都写在一个文件里，修改一个按钮可能影响整页。

React 通过组件把页面拆成多个可复用的 UI 单元，并用明确的数据流把这些单元连接起来。它解决的是页面复杂度和重复代码问题。

二、没有它之前发生了什么？

所有页面逻辑写在一个文件
↓
文件越来越大，修改容易互相影响
↓
开始复制 HTML 和手动操作 DOM
↓
重复代码与状态同步问题增加
↓
组件化 UI 和声明式渲染出现

React 不是消灭复杂度，而是把复杂度拆成可以理解和测试的组件边界。

三、核心概念

1. Component

组件是负责一小块界面和交互的函数。组件可以组合成页面，也可以被多个页面复用。

2. Props

Props 是父组件传给子组件的输入。子组件不应该直接修改父组件传来的 Props。

3. State

State 是组件需要记住并会随交互变化的数据。State 改变后，React 会重新计算界面。

4. 单向数据流

通常数据从父组件流向子组件，子组件通过回调通知父组件发生了事件。

5. 声明式 UI

开发者描述“数据处于某种状态时界面应该是什么样”，而不是手动命令 DOM 逐步变化。

四、运行流程

五、面试复习

一句话回答

React 用组件拆分界面，Props 负责父子传值，State 保存会变化的数据，数据通常沿父到子的方向流动。

高频追问

• Props 和 State 有什么区别？
• 为什么子组件不能直接修改 Props？
• React 为什么需要 key？
• 组件通信有哪些方式？

容易答错

不要说 React 会把整个页面无条件重绘。React 会根据状态变化计算需要更新的部分，但组件设计和 key 仍然会影响性能。

六、项目展示

在知识库平台的知识卡片中，可以把搜索框、筛选器、知识卡片、收藏按钮拆成独立组件。这样后续增加面试模式时，不需要重写整个页面。