# Chakra UI Performance Optimization

> 遵循 Chakra UI 最佳实践来优化 React 组件的性能

- Skill: `liaosw97/chakra-ui-performance-optimization` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add liaosw97/chakra-ui-performance-optimization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/liaosw97/chakra-ui-performance-optimization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: liaosw97 (https://skillmd.com/u/liaosw97)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/liaosw97/chakra-ui-performance-optimization

---


- **遵循 Chakra UI 性能优化的最佳实践**：
  - **按需导入组件**：只导入和使用实际需要的 Chakra UI 组件，避免全量导入，减少打包体积。
  - **避免不必要的重新渲染**：
    - 使用 `React.memo` 包装纯函数组件，当 props 没有改变时避免重新渲染。
    - 使用 `useCallback` 和 `useMemo` 优化函数和计算结果，防止它们在每次渲染时重新创建。
  - **CSS 变量**：Chakra UI 内部大量使用 CSS 变量，这有助于减少运行时计算，提高样式更新效率。
  - **主题定制**：在主题配置中，只覆盖需要修改的部分，避免不必要的深度合并。
  - **列表虚拟化**：对于长列表，考虑使用 `react-window` 或 `react-virtualized` 等库进行虚拟化，只渲染视口内的项目，提高性能。
  - **懒加载**：对于不立即需要的组件或模块，使用 `React.lazy` 和 `Suspense` 进行代码分割和懒加载。
  - **避免在渲染函数中创建对象/函数**：避免在组件的渲染函数内部创建新的对象或函数，这会导致每次渲染都创建新的引用，可能导致子组件不必要的重新渲染。
  - **使用 `shouldForwardProp`**：如果自定义组件接收到非标准 HTML 属性，可以使用 `shouldForwardProp` 来防止这些属性被渲染到 DOM 中，避免不必要的 DOM 属性。
  - **服务器端渲染（SSR）/静态站点生成（SSG）**：对于 Next.js 或 Gatsby 等框架，利用 SSR/SSG 预渲染页面，减少客户端加载时间，提高首次内容绘制（FCP）性能。