React
React 的定位、核心思维与现代开发主线入口。
#tech / dev / frame
#resource / react
#type / concept
#status / evergreen
[!info] related notes
- 所属 MOC: React MOC
- 前置知识: javascript, jsx
- 相关概念: react-hooks, React 生命周期与 Hooks, react-custom-hooks, react-use-state, react-use-ref, react-use-context, react-use-effect, react-use-layout-effect, react-use-reducer, react-use-memo, react-use-callback, react-memo, react-component-design-principles, React组件渲染与重渲染, React中的Context与状态管理边界, React副作用与外部系统同步总览, React中的事件处理与状态更新, react-list-rendering-and-key, React中的props、state和ref, react-first-impressions, react-learning-roadmap, react-interview-high-frequency, react-state-management-selection, react-performance-overview
React
React 是一个用于构建用户界面的库。它的核心不是“会几个 Hook”，而是用组件、状态、声明式渲染和清晰的数据流来组织复杂交互界面。
一句话理解
React 的核心心智模型是：UI = f(state)。
React 真正重要的 5 个关键词
- 组件：把界面拆成可复用单元
- 声明式：描述界面应该长什么样，而不是手动改 DOM
- 状态驱动：界面由
props、state、context等数据源决定 - 单向数据流：父组件传入数据，子组件通过事件回传意图
- 逻辑分层：渲染逻辑、事件逻辑、副作用逻辑要分开看
学 React 时的主线
- 先学 JSX、组件、
props、state - 再学事件、条件渲染、列表渲染
- 然后进入 Hooks
- 再理解 React 生命周期与 Hooks
- 最后再理解副作用边界、状态管理、性能优化和现代工程化
其中最值得单独拆开理解的几项是：React 生命周期与 Hooks, react-use-state, react-use-ref, react-use-context, react-use-effect, react-use-reducer, react-use-memo, react-use-callback, react-custom-hooks, react-list-rendering-and-key。
为什么 Hooks 是 React 的关键分水岭
Hooks 不是“几个方便 API”，而是 React 对组件逻辑组织方式的一次升级。
在 Hooks 出现前：
- 有状态逻辑和生命周期逻辑主要写在 class 组件里
- 同一件事常被拆散到多个生命周期方法
- 想复用逻辑，常依赖 HOC 或 render props
Hooks 出现后，函数组件可以直接拥有：
- 状态
- 副作用
- 上下文
- 引用
- 缓存
- 自定义逻辑复用能力
所以学 React 不能只停留在“API 会不会背”，而要理解 React 为什么希望你把逻辑按功能聚合，而不是按生命周期切碎。
React 为什么容易越学越乱
通常不是因为 API 太多，而是没有分清三类逻辑：
- 渲染逻辑：根据状态计算 UI
- 事件逻辑：用户操作后如何修改状态
- 副作用逻辑：如何和网络、DOM、订阅、第三方系统同步
只要这三层边界混在一起，组件就会很快失控。
React 里最重要的一个事实
组件函数不是“创建一次后常驻”的对象，而是会反复重新执行的映射函数。
每次重新渲染时，大致会发生：
- 组件函数重新执行
- Hook 按顺序重新调用
- React 取出对应槽位中的旧状态
- 计算新的 JSX
- 提交必要的 DOM 更新
- 在需要时运行副作用 cleanup 和 setup
这也是为什么：
- 普通局部变量不会自动记住
- Hook 只能在顶层调用
- 闭包旧值问题会反复出现
- 性能优化首先要看“是不是做了没必要的工作”
现代 React 的主流写法
- 函数组件
- Hooks
- 自定义 Hook 复用逻辑
- 配合 Vite、Next.js、React Router 或数据层方案完成工程化
一个最实用的学习原则
先把正确性学透，再谈优化。
顺序通常应该是：
- 先判断这个值该放哪
- 再判断这段逻辑属于渲染、事件还是副作用
- 再判断是否需要
memo、useMemo、useCallback
很多 React 代码难维护，不是因为“优化太少”，而是因为：
- 建了不该存在的状态
- 写了不该存在的 Effect
- 用错了
ref和state - 把引用稳定问题理解成“所有函数都要 useCallback”
什么时候回到这篇笔记
- 你已经接触过 React，但概念点还是零散时
- 你需要重新建立“组件 - 状态 - Hook - 副作用”的整体地图时
- 你要判断接下来该补基础、Hooks 还是工程能力时
推荐阅读顺序
延伸阅读
- 学习顺序导向：react-learning-roadmap
- 面试整理导向：react-interview-high-frequency
- 工程实践导向：react-state-management-selection, react-performance-overview
一个最实用的判断题
学 React 的关键不是记住所有 Hook 名字，而是每次都能回答清楚：
- 这个数据该放哪里
- 这段逻辑属于渲染、事件还是副作用
- 这个组件应该怎么拆