React速查表
React核心语法速查表，涵盖JSX、组件、Hooks、状态管理、路由、Context、性能优化等常用API参考。
📝 JSX语法
| 语法 | 说明 |
|---|---|
<div>Hello</div> | JSX元素 |
<Component /> | 自闭合组件 |
{expression} | 在JSX中嵌入表达式 |
{condition ? <A/> : <B/>} | 条件渲染 |
{items.map(i => <li key={i.id}>{i.name}</li>)} | 列表渲染（必须提供key） |
<>content</> | Fragment片段，不产生额外DOM节点 |
className="name" | 指定CSS类名（非class） |
style={{ color: "red" }} | 内联样式（对象形式） |
dangerouslySetInnerHTML={{ __html: html }} | 渲染原始HTML（谨慎使用） |
htmlFor="id" | 绑定label的for属性 |
🧩 组件
| 语法 | 说明 |
|---|---|
function App() { return <div/> } | 函数组件定义 |
const App = () => <div/> | 箭头函数组件 |
function Greeting({ name }) { ... } | 解构props |
Greeting.defaultProps = { name: "World" } | 设置默认props |
App.propTypes = { name: PropTypes.string } | props类型检查 |
function App({ children }) { ... } | children prop |
<App key={id} /> | 使用key标识组件 |
React.memo(Component) | 高阶组件，避免不必要的重渲染 |
🪝 Hooks
| Hook | 说明 |
|---|---|
useState(initialValue) | 声明状态变量，返回 [value, setValue] |
const [a, setA] = useState(0) | 带初始值的状态声明 |
setA(prev => prev + 1) | 基于前一个状态更新（函数式更新） |
useEffect(() => { ... }, [deps]) | 副作用处理，deps变化时执行 |
useEffect(() => { ... return cleanup }, []) | 带清理函数的副作用（组件卸载时执行） |
useEffect(() => { ... }) | 每次渲染都执行的副作用 |
useContext(MyContext) | 读取Context值 |
useRef(initialValue) | 创建可变引用对象 { current: value } |
useMemo(() => compute(a, b), [a, b]) | 缓存计算结果，依赖不变则不重算 |
useCallback(fn, [deps]) | 缓存函数引用，避免子组件重渲染 |
useReducer(reducer, initialState) | 复杂状态管理，类似Redux模式 |
useImperativeHandle(ref, () => ({ ... })) | 自定义ref暴露的实例方法 |
useLayoutEffect(() => { ... }, [deps]) | DOM更新后同步执行的副作用 |
useId() | 生成唯一的SSR安全ID |
useTransition() | 标记非紧急更新，提升交互性能 |
useDeferredValue(value) | 延迟更新值，不阻塞交互 |
🖱️ 事件处理
| 语法 | 说明 |
|---|---|
onClick={() => handleClick(id)} | 点击事件 |
onChange={(e) => setValue(e.target.value)} | 输入变化事件 |
onSubmit={(e) => { e.preventDefault(); ... }} | 表单提交事件 |
onKeyDown={(e) => { if (e.key === "Enter") ... }} | 键盘事件 |
e.preventDefault() | 阻止默认行为 |
e.stopPropagation() | 阻止事件冒泡 |
e.target.value | 获取输入元素的值 |
e.target.name | 获取输入元素的name |
🔀 条件渲染
| 语法 | 说明 |
|---|---|
{isLoggedIn ? <Dashboard/> : <Login/>} | 三元运算符 |
{isLoggedIn && <Dashboard/>} | 逻辑与短路（false时不渲染） |
{items.length === 0 && <p>空</p>} | 空列表提示 |
return null | 返回null不渲染任何DOM |
{(() => { switch(role) { case "admin": return <Admin/>; ... } })()} | IIFE实现switch条件 |
if (loading) return <Spinner/> | 提前return实现条件渲染 |
📋 列表渲染
| 语法 | 说明 |
|---|---|
{items.map(item => <li key={item.id}>{item.name}</li>)} | 基本列表渲染 |
{items.filter(i => i.active).map(...)} | 过滤后渲染 |
{items.length > 0 ? <List/> : <Empty/>} | 空列表判断 |
key={item.id} | 使用唯一标识作为key（非index） |
<Fragment key={item.id}>...</Fragment> | 列表中使用Fragment并带key |
🌐 Context API
| 语法 | 说明 |
|---|---|
const MyContext = createContext(defaultValue) | 创建Context对象 |
<MyContext.Provider value={data}>...</MyContext.Provider> | 提供Context值 |
const value = useContext(MyContext) | 消费Context值 |
createContext(null) | 创建无默认值的Context |
MyContext.displayName = "MyContext" | 设置Context调试显示名称 |
const ThemeContext = createContext("light") | 创建带默认值的Context |
⚡ 性能优化
| API | 说明 |
|---|---|
React.memo(Component) | 纯组件，props不变则跳过重渲染 |
React.memo(Component, areEqual) | 自定义比较函数的memo |
useMemo(() => compute(a), [a]) | 缓存计算结果，避免重复计算 |
useCallback(fn, [deps]) | 缓存函数引用，传递给memo子组件 |
React.lazy(() => import("./Heavy")) | 代码拆分，懒加载组件 |
<Suspense fallback={<Spinner/>}><Lazy/></Suspense> | 包裹懒加载组件，显示加载状态 |
useTransition() | 标记低优先级更新 |
useDeferredValue(value) | 延迟值更新 |
key={uniqueId} | 使用key强制重建组件（重置状态） |
关于React
React是用于构建用户界面的JavaScript库，采用声明式编程范式。掌握这些核心概念和API可以帮助你高效地构建可维护的现代Web应用。建议配合React DevTools进行调试。