React 常用语法速查表
React 是 Facebook 出品的 UI 库，整理 React 18 常用语法和 Hooks，快速查阅开发高频用法。
返回 编程语言组件基础 4
function App({ name }) { return <h1>Hello {name}</h1> }函数组件
<App name="John" />使用组件传 props
{children}插槽内容
{items.map(item => <li key={item.id}>{item.name}</li>)}列表渲染
常用 Hooks 5
const [count, setCount] = useState(0)状态管理
useEffect(() => { return () => cleanup }, [deps])副作用处理
const memoized = useMemo(() => compute(a, b), [a, b])记忆计算结果
const handler = useCallback(() => {}, [deps])记忆回调函数
const ref = useRef(null)引用 DOM 或持久化值
状态管理 3
const [state, dispatch] = useReducer(reducer, initialState)复杂状态管理
const ctx = useContext(MyContext)跨层级数据共享
createContext(defaultValue)创建 Context
事件与表单 4
<button onClick={(e) => handleClick(e)}>事件处理
<input value={val} onChange={e => setVal(e.target.value)} />受控组件
e.preventDefault()阻止默认行为
e.stopPropagation()阻止事件冒泡
💡 提示
- useEffect 的依赖数组为空 [] 时只在挂载时执行一次，类似 componentDidMount。
- useMemo 和 useCallback 用于性能优化，避免不必要的重新计算和渲染。
- React 18 的 StrictMode 在开发模式下会双重调用 useEffect，帮助发现副作用问题。
- Suspense + lazy() 可以实现组件懒加载和代码分割。