合理设计组件层级能显著减少渲染开销、降低内存占用并加快响应速度，核心是结构更轻、计算更少、更新更精准，包括控制嵌套深度、按职责拆分无状态组件、选用高效布局容器及精简属性传递。
合理设计组件层级能显著减少渲染开销、降低内存占用，并加快页面响应速度。核心思路是让结构更轻、计算更少、更新更精准。
控制嵌套深度，避免过度包装
深层嵌套会放大布局计算和虚拟 DOM diff 的成本。测试表明，5 层嵌套比 3 层多耗时约 40%。
- 删除无用的容器包裹，比如连续两个 Row 或 Column 嵌套
- 自定义组件的 `build()` 或 `render()` 函数中，不额外套一层无关容器（如 `Column` 仅包一个 `Text`）
- 用 `Fragment`（或 Vue 的 ``、React 的 ``）替代纯装饰性父容器
不复杂但容易忽略。按职责拆分，优先使用无状态组件
把逻辑与展示分离，能减少不必要的重绘：
- 纯展示类组件（如图标、标签、静态卡片）设为无状态，避免内部 state 和生命周期开销
- 交互复杂部分（如表单、模态框）才用有状态组件，并严格控制 `setState` / `useState` 触发频率
- 将列表项、表格行等提取为独立子组件，配合 `key` 和 `React.memo` / `v-memo` 避免整列表重渲染
选用高效布局容器，减少测量开销
不同容器的布局算法差异明显：
- 线性排列优先用 `Column`/`Row`，而非 `Flex`（后者需二次测量）
- 网格布局用 `Grid` 而非多层嵌套 `Row + Column`
- 长列表用 `List` 或 `Virtualize` 容器，只渲染可视区域内容
- 复杂定位场景用 `RelativeContainer` 或 CSS `position`，避免靠嵌套模拟偏移
精简属性传递，减少中间层干扰
props 逐层透传不仅冗长，还容易因某层 props 变动导致整条链路重渲染：
- 使用上下文（Context API、provide/inject、ThemeContext）共享主题、用户信息等全局数据
- 避免在中间组件中解构再重组 props，直接透传必要字段
- 对接收大量 props 的组件，用 `shouldComponentUpdate`、`React.memo` 或 `v-memo` 显式控制更新条件
