当前位置：首页 > news >正文

【回顾React的一些小细节】render里不可包含的东西

news 2026/6/30 12:19:00

在 React 的render()（或函数组件的渲染路径）中

不应包含

副作用（Side effects）: 如网络请求、订阅、定时器、I/O、路由跳转等。
- 为什么：render 应是纯函数，副作用会在每次渲染重复执行或引发循环。
- 替代：类组件放componentDidMount/componentDidUpdate，函数组件放useEffect（并正确设置依赖）。
调用setState或导致状态变化的操作: 直接或间接在 render 里调用setState会立即触发新渲染，容易导致无限循环。
- 替代：把状态更新放到事件回调、生命周期、或 effect 中。
直接修改this.state或可变数据（Mutation）: 如this.state.obj.x = 1、array.push()。
- 为什么：会破坏不可变性，导致难以追踪的渲染问题。
- 替代：使用不可变拷贝：const next = {...this.state.obj, x:1}或const nextArr = [...arr, item]。
长时间或昂贵的计算: CPU 密集型操作会阻塞渲染导致卡顿。
- 替代：使用useMemo/memo/PureComponent或把计算异步化/提前计算。
创建新的函数/对象引用（频繁）: 在渲染每次都新建匿名函数或对象（如onClick={() => doX()}、style={{}}）会使子组件收到不同引用，触发不必要重渲染。
- 替代：用 class 方法、useCallback、useMemo或提前提取常量。
直接操作 DOM 或添加事件监听: 如document.addEventListener、手动修改节点。
- 替代：使用 refs + 在componentDidMount/useEffect中进行，并在卸载时清理。
异步/await 表达式: render 不能是异步函数，返回值必须是 React 元素或null。
- 替代：在 effect 中做异步工作，状态准备好后渲染。
非确定性副作用（例如导航、弹窗、全局状态修改）: 这些在每次渲染时重复执行会造成 UX/状态错乱。
- 替代：通过事件或 effect 控制一次性/受控触发。
抛出异常的操作（未捕捉）: 如果 render 抛错会破坏整棵组件树（除非有 ErrorBoundary）。
- 替代：在渲染前验证数据，或在渲染外做可能失败的逻辑并保留安全值。

常见错误示例（错误）

// 错误：每次 render 都会创建定时器并在回调里 setState -> 无限循环 render() { setTimeout(() => this.setState({ x: 1 }), 1000); return <div>{this.state.x}</div>; }

正确写法（类组件）

componentDidMount() { this.timer = setTimeout(() => this.setState({ x: 1 }), 1000); } componentWillUnmount() { clearTimeout(this.timer); } render() { return <div>{this.state.x}</div>; }

正确写法（函数组件 + Hook）

useEffect(() => { const id = setTimeout(() => setX(1), 1000); return () => clearTimeout(id); }, []); // 空依赖：只在挂载时执行一次

（排查 render 问题时用）

render 中有没有setState/setTimeout/fetch/addEventListener？若有，把它们移动到 effect 或生命周期。
是否直接修改state或 props 的对象/数组？若是，改为不可变更新。
是否每次渲染都创建了新的函数/对象作为 prop？考虑useCallback/useMemo。
是否在组件卸载时清理了订阅或计时器？（componentWillUnmount/ effect cleanup）