当条件变化导致组件结构从 切换为直接返回 时，React 默认会销毁并重建 实例，引发不必要重渲染；本文介绍通过 useMemo 缓存 JSX 元素配合 React.memo 的正确用法，实现子组件实例复用。
当条件变化导致组件结构从 `
在 React 中，组件是否重渲染不仅取决于 props 是否变化，更关键的是 JSX 元素对象的引用是否相同。即使 <child></child> 的 props 完全一致，只要它在每次 render 中是新创建的 JSX 对象（即 React.createElement(Child, ...) 返回的新引用），React 就会将其视为“新组件”，触发卸载-挂载流程，导致子组件完全重初始化——这正是你遇到的问题。
解决方案的核心是：确保 <child></child> 的 JSX 引用在条件切换前后保持稳定。useMemo 是实现这一点的最直接方式：
import { useMemo } from 'react';
function MyComponent() {
const condition = /* your logic */;
// ✅ 正确：useMemo 缓存 JSX 元素，空依赖数组确保只创建一次
const childElement = useMemo(() => <Child />, []);
if (condition) {
return childElement; // 复用同一 JSX 引用
}
return (
<Parent>
{childElement} {/* 同一引用传入 Parent */}
</Parent>
);
}⚠️ 注意事项：
-
useMemo(() => <child></child>, [])中的空依赖数组[]至关重要：它保证<child></child>JSX 元素仅在组件首次挂载时创建，后续 render 均复用同一引用； - 仅靠
useMemo还不够——请务必同时为Child组件启用React.memo，否则即使 JSX 引用不变，若Child自身未做浅比较优化，仍可能因父组件重渲染而被动更新：
// Child.tsx — 必须包裹 React.memo
const Child = React.memo(() => {
console.log('Child rendered'); // 仅在真正需要时打印
return <div>Expensive UI</div>;
});? 补充说明：
- ❌
React.memo单独使用无效，是因为在原始代码中，<child></child>每次都是新 JSX 对象，React.memo根本没机会生效（它作用于组件内部的 props 比较，而非外部 JSX 创建逻辑）； - ✅
useMemo + React.memo组合才是完整解法：前者保引用，后者保内部更新逻辑； - 若
Child需要动态 props，请将 props 作为useMemo的依赖项，并确保 props 本身也是稳定引用（例如用useMemo或useCallback包裹对象/函数）。
总结：避免结构切换导致的不必要重渲染，本质是控制 JSX 元素的引用稳定性。useMemo 提供了声明式缓存能力，配合 React.memo 的 props 比较，可高效复用子组件实例，显著提升性能敏感场景下的渲染效率。
