liaosw97 - 遵循 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）性能。
Chakra UI Performance Optimization by liaosw97 · 4993f62
npx skillmds@latest add liaosw97/chakra-ui-performance-optimization File contents
---name: chakra-ui-performance-optimizationdescription: 遵循 Chakra UI 最佳实践来优化 React 组件的性能---- **遵循 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）性能。
liaosw97/awesome-rules-skills/tree/main/plugins/chakra-ui/skills/chakra-ui---performance-optimization commit 4993f622c8
Frequently asked questions
Run npx skillmds@latest add liaosw97/chakra-ui-performance-optimization in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
遵循 Chakra UI 最佳实践来优化 React 组件的性能 It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
liaosw97 (@liaosw97) published this skill. Their other Agent Skills are listed on their SkillMD profile.