组件重渲染由状态或属性变化触发，即使值未变但引用改变也会导致更新，造成性能损耗。使用 React.memo 可缓存函数组件，仅当 props 变化时重渲染，配合自定义比较逻辑可优化复杂对象判断。避免在 JSX 中创建内联函数或对象，应通过 useCallback 缓存函数、useMemo 缓存计算结果，防止子组件因引用变化误更新。合理拆分组件结构，将静态区域独立并结合 memo 优化，动态内容集中管理 state，减少连锁更新。谨慎使用高频更新的 context，防止大量组件无效刷新。结合开发工具监控渲染行为，针对性应用上述策略可显著提升页面流畅度。
在前端开发中，组件重渲染是影响应用性能的关键因素之一。虽然现代框架如 React 具备高效的 diff 算法，但频繁或不必要的重渲染仍会导致界面卡顿、响应变慢。要提升渲染性能，核心在于减少那些没有实际数据变化的组件更新。
理解组件重渲染的触发机制
组件重渲染通常由状态（state）或属性（props）的变化引起。即使新旧值相同，只要引用发生变化，也会导致重新渲染。例如，父组件更新时，默认会向下触发所有子组件的更新，除非进行优化控制。
常见误区是认为“界面没变就不用优化”，但实际上重渲染过程包含虚拟 DOM 对比、函数执行、生命周期调用等开销，即便不更新真实 DOM，也消耗 CPU 资源。
使用 React.memo 进行组件记忆化
React.memo 是高阶组件，用于缓存函数组件的输出，仅当 props 变化时才重新渲染。
• 将纯展示型、接收简单 props 的组件包裹在 React.memo 中• 注意：默认只做浅比较，复杂对象需传入第二个参数自定义对比逻辑• 避免滥用，因为对比本身也有成本，适合 props 较稳定的情况示例：
const UserCard = React.memo(({ user }) => {
return {user.name};
}, (prevProps, nextProps) => {
return prevProps.user.id === nextProps.user.id;
});
避免内联函数和对象导致的无效更新
在 JSX 中直接定义函数或对象，每次渲染都会创建新引用，导致子组件误判为 props 变更。
• 将事件处理函数提取到组件外部或使用 useCallback 缓存• 不要在 render 中传递 { { } } 或 [ ] 类型的临时对象作为 props• 使用 useMemo 缓存计算结果，防止重复执行耗时逻辑
错误示例：
{/* 每次都生成新函数和新数组 */}
handleItemClick(item)} />
优化后：
const handleClick = useCallback((item) => {
handleItemClick(item);
}, [handleItemClick]);
const processedData = useMemo(() => data.map(x => ({ ...x, label: x.name })), [data]);
合理拆分组件结构，隔离动态内容
将静态部分与动态部分分离，避免大组件因局部更新而整体重绘。
• 把头部、侧边栏等不变区域独立成组件，并配合 memo 使用• 动态内容集中管理 state，减少跨层级传播带来的连锁更新• 利用 context 时谨慎，避免高频更新的 context 导致大量订阅组件刷新基本上就这些。关键是在开发中保持对渲染行为的敏感度，结合开发者工具检查重渲染情况，针对性地应用上述策略，就能显著提升页面流畅度。
