Receber por email
← Voltar para o catálogo

React 最佳实践

React 组件设计模式、Hooks 使用指南、性能优化技巧

860estrelas
Atualizado há 5 meses

Ver no GitHub ↗

Como adicionar

/plugin marketplace add huangjia2019/claude-code-engineering

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Para o autor da skill

Cole no README do seu repo

Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.

[![Skillteca](https://www.skillteca.com.br/api/badge/react/svg)](https://www.skillteca.com.br/skills/react)

Alerta por categoria

Receba novas skills de Design e Frontend toda segunda

1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.

Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.

Ler descrição completa

React 最佳实践

本技能包含 React 开发的最佳实践,帮助你编写高质量的 React 代码。

目录

当用户需要特定主题时,加载对应章节:

  • Hooks 基础 → 加载 [chapters/hooks.md](./chapters/hooks.md)
  • Context 使用 → 加载 [chapters/context.md](./chapters/context.md)
  • 性能优化 → 加载 [chapters/performance.md](./chapters/performance.md)

只在用户明确需要时加载完整内容,避免浪费上下文窗口。

核心原则

  1. 组件单一职责:一个组件做一件事
  2. 状态提升最小化:状态放在需要它的最近公共祖先
  3. 避免过早优化:先让它工作,再让它快
  4. 优先组合而非继承:使用 children 和 render props

快速参考

自定义 Hook 命名

// 好的命名
useUser()
useLocalStorage()
useDebounce()

// 不好的命名
fetchUser()      // 不是 use 开头
useData()        // 太模糊

组件文件结构

ComponentName/
├── index.ts           # 导出
├── ComponentName.tsx  # 组件实现
├── ComponentName.test.tsx
├── ComponentName.styles.ts
└── types.ts           # 类型定义
Compartilhar X LinkedIn