React Core Fundamentals 是一份面向通用 React 基础的规范参考，覆盖每个 React 应用共享的构建块：组件与 JSX、props 与 state、核心 Hooks、组合模式、条件与列表渲染，以及受控输入。它是生态技能（样式、数据获取、状态管理、部署）所依赖的基础“依赖 React”目标，这些技能假定已具备核心 React 知识。
适用场景 在构建组件、连接 props 或管理本地状态时；在针对特定问题选择核心 Hooks 时；在渲染列表或条件 UI 时；在实现受控表单输入时；在建立其他生态技能所依赖的 React 基础时，都可以使用本技能。
内容聚焦基础。对于高级 Hook 组合（基于 SWR 的自定义 Hook、防抖上下文、记忆化 Provider），应使用同系列的 react-hooks-composition 技能。对于复杂 UI 流程的显式有限状态机建模，应使用同系列的 react-state-machine 技能。
组件与 JSX React 组件是返回 JSX 的函数。组件名使用 PascalCase。返回单个根节点，或将同级节点包裹在 Fragment（<>...</>）中。JSX 在 {} 内嵌入表达式；属性使用 camelCase（className、onClick、htmlFor）。JSX 返回 UI 描述，React 将其与 DOM 进行协调。
Props 与 State Props 从父级向子级传递数据，在子级内部为只读。State 保存组件拥有并随时间变化的数据。应将 props 和 state 视为不可变；通过 setter 更新 state，当下一个值依赖前一个值时优先使用函数式更新器（setCount(prev => prev + 1)）。
核心 Hooks 概览 Hooks 只能在组件或自定义 Hook 的顶层调用，绝不能在条件、循环或嵌套函数中调用，以保证跨渲染的调用顺序稳定。
- useState：本地组件状态，保存值与 setter，值变化时重新渲染组件。
- useEffect：与外部系统同步，在渲染后执行副作用（订阅、定时器、数据获取、手动 DOM 操作）。依赖数组控制重新运行时机；返回清理函数以拆除订阅。
- useRef：跨渲染存活的可变值，不触发重新渲染。常见用途：引用 DOM 节点，或跨渲染保存值（定时器 id、上一次的值）。
- useMemo：缓存昂贵计算，仅当依赖变化时重新计算；用于真正昂贵的计算，或为传给记忆化子组件的引用保持稳定身份。
- useCallback：稳定函数引用，在依赖相等时跨渲染返回同一函数实例；将稳定回调传给记忆化子组件或 effect 依赖数组。
- useContext：无需逐层传递 props 即可读取共享状态，读取树中更高层 Provider 提供的当前上下文值。 如需防止消费者不必要重渲染的记忆化 Provider 模式，请参见 react-hooks-composition。
组合模式 优先使用组合而非配置。通过 children 传递内容，通过 props 传递行为。将共享逻辑抽取为自定义 Hook（useSomething），而不是在组件之间复制；保持组件小而单一职责。
条件与列表渲染 使用 && 表示存在性、三元表达式表示二选一来进行条件渲染。使用 map 渲染列表，并为每一项提供源自其身份的稳定 key（在顺序可能变化时不要使用数组索引）。
受控输入 受控输入的值来自 state，并通过 onChange 报告变化。state 是唯一数据源。
应避免的反模式
- 不要直接修改 state：直接修改会跳过 setter，React 不会重新渲染；应创建新数组或对象使引用改变。
- 不要有条件地调用 Hooks：条件式 Hook 调用会破坏 React 依赖的稳定调用顺序；应无条件调用 Hook，再根据其结果分支。
- 不要将数组索引用作可重排列表的 key：索引 key 会在项目移动时导致 React 错误归属状态；应使用稳定身份 key。
何时转向同系列技能
- react-hooks-composition：高级自定义 Hook 组合——基于 SWR 的数据获取、带双加载状态的防抖搜索、记忆化上下文 Provider、可复用异步状态 Hook。
- react-state-machine：使用 XState v5 进行显式有限状态机建模，适用于复杂流程（多步表单、媒体播放器、带动画的模态框），使不可能的状态无法表示。
- react-advanced：React 19 平台特性与渲染架构——React Compiler（自动记忆化）、并发渲染、use() Hook、Actions、虚拟化、代码分割以及 RSC 边界。
最佳实践摘要 组件返回 JSX：PascalCase 命名，单个根节点或 Fragment。Props 只读：向下传递数据，共享时向上提升 state。不可变地更新 state：使用 setter，优先函数式更新器。Hooks 仅在顶层调用：绝不条件式调用 Hooks。Effects 同步外部系统：用依赖限定作用域，清理订阅。有意识地记忆化：仅在昂贵工作或需要稳定身份时使用 useMemo/useCallback，而非默认使用。稳定 key：按身份而非数组索引为列表设置 key。受控输入：state 是唯一数据源。
参考：React Documentation、Rules of Hooks、Thinking in React。
本技能未提供具体收费、价格、平台或效果信息。