#React

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

#推荐阅读路径

这组文章按“面试高频优先、相关主题聚合、从基础到原理再到工程实践”的顺序组织：

1. Hooks 与状态更新：先读 Hooks 原理、useState 更新机制、依赖数组、useEffect 与 useLayoutEffect 和 自定义 Hook。
2. 组件协作与事件：接着读 受控组件与非受控组件、Ref 与 forwardRef、Context 和 合成事件。
3. 高频陷阱与渲染原理：然后学习 常见坑、Virtual DOM 与 Diff、Fiber 架构、React 18 并发渲染、批量更新 和 性能优化。
4. 状态管理与组件模型：再学习 状态管理选型、Redux 原则、函数组件与类组件 和 Error Boundary。
5. React 18 与工程场景：最后学习 Suspense、SSR/SSG/ISR、Portals 和 样式方案。

如果只准备高频面试题，优先完成前 3 组；如果要建立完整工程知识，再继续阅读后 3 组。每篇文章尽量回答三个问题：它解决什么问题、运行机制是什么、什么时候不该使用它。

#核心思想

#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 的合成事件是什么？

想系统准备面试，可以按上面的路径阅读；原理题重点关注“状态更新 → Render → Commit”这条链路，实践题重点关注副作用边界、引用稳定性和状态放置位置。