React 速查
共 23 条 React 常用写法，覆盖组件与 JSX、常用 Hooks、事件与表单、工程与命令 四组内容。支持搜索与分类筛选，点击即可复制。
组件与 JSX
函数组件是主流写法。
| 语法 / 命令 | 说明 |
|---|---|
| 函数组件 | |
| props 解构 | |
| JSX（用 className 而非 class） | |
| 条件渲染（三元） | |
| 短路条件渲染 | |
| 列表渲染（必须给 key） |
常用 Hooks
函数组件里的状态与副作用。
| 语法 / 命令 | 说明 |
|---|---|
| 状态（setN(n + 1)） | |
| 副作用（依赖变化时执行，清理函数用于卸载） | |
| 仅挂载时执行一次（空依赖） | |
| 缓存计算结果 | |
| 缓存函数引用 | |
| 引用 DOM 或保存跨渲染的值 | |
| 读取上下文 |
事件与表单
事件处理与受控组件。
| 语法 / 命令 | 说明 |
|---|---|
| 事件绑定用箭头函数 | |
| 读取输入值 | |
| 受控组件（value + onChange 成对） | |
| 提交表单并阻止默认刷新 | |
| 阻止事件冒泡 |
工程与命令
脚手架与常用命令。
| 语法 / 命令 | 说明 |
|---|---|
| 用 Vite 创建 React 项目 | |
| 创建 Next.js 项目（React 框架） | |
| 开发 / 构建 / 预览 | |
| 安装常用库（路由） | |
| 常见状态管理库之一 |
使用说明
React 速查：组件与 JSX、Hooks、事件与表单、工程命令；支持搜索与分类筛选，点击即可复制。
- 按用途点分类：组件与 JSX、常用 Hooks、事件与表单、工程与命令。
- 点「语法 / 命令」列复制片段，替换组件名与状态变量。
- 状态用 useState、副作用用 useEffect、列表必须给 key。
- 项目用 Vite 或 Next 起手，npm run dev 开发。
常见问题
- useEffect 的依赖数组怎么理解？
- 依赖数组列出「哪些变量变化时重新执行」。空数组 [] 表示只挂载时执行一次；不写数组则每次渲染都执行；写上依赖则依赖变化时执行。
- 为什么列表渲染要加 key？
- key 帮助 React 识别每项的身份，增删 / 排序时才能高效且正确地复用与更新 DOM；用稳定唯一值（如 id），别用数组下标。
- 受控组件和非受控组件有什么区别？
- 受控组件用 value + onChange 由 React 状态驱动；非受控组件用 ref 直接读 DOM 值。表单校验、联动多的场景优先用受控组件。
- React 和 Vue 该选哪个？
- React 生态最大、灵活度高，适合团队与技术选型广的项目；Vue 上手更简单、模板直观，适合快速开发。按团队熟悉度与需求选。