#React

Facebook 开发的 UI 库，用于构建用户界面

#核心思想

#UI = f(state)

这是 React 最著名的公式。

• 视图是状态的映射。
• 你不需要手动操作 DOM (jQuery 模式)，只需要修改 State，React 会自动把 UI 更新到最新状态。

#单向数据流

• 自上而下：数据（Props）只能从父组件流向子组件。
• 优势：数据流向清晰，出现 Bug 时很容易定位数据来源，避免了双向绑定带来的数据混乱。

#声明式 vs 命令式

• 声明式：告诉 React "我想要什么页面" (<h1>{title}</h1>)。
• 命令式：告诉浏览器 "第一步创建h1，第二步设置文字..."。
• 声明式代码更易读、更易维护。

#组件化

• 将复杂的 UI 拆分为独立的、可复用的组件。
• 每个组件管理自己的状态，然后组合成复杂的页面。

#不可变数据

• 不直接修改 State，而是替换它。
• 这是 React 性能优化（浅比较）的基础。

#核心概念

#JSX

JavaScript 的语法扩展，允许在 JS 中编写类似 HTML 的代码。

#组件

React 应用由组件构成，组件是可复用的 UI 单元。

#State 与 Props

• State：组件内部的状态，组件自己管理
• Props：从父组件传入的数据，子组件只读

#状态管理

• useState：函数组件中管理本地状态
• useReducer：复杂状态逻辑管理
• Context：跨组件数据共享

#生命周期

• 挂载：componentDidMount / useEffect
• 更新：componentDidUpdate / useEffect
• 卸载：componentWillUnmount / useEffect cleanup

#Virtual DOM

React 的性能保障，通过 diff 算法最小化真实 DOM 操作。

#常见面试题

1. React 的虚拟 DOM 是什么？
2. React Hooks 的原理是什么？
3. React 的 Fiber 架构是什么？
4. useEffect 和 useLayoutEffect 的区别？
5. React 的合成事件是什么？