React组件架构指南：函数式组件、Hooks、TypeScript最佳实践与性能优化

react-component-architecture by aj-geddes/useful-ai-prompts

239 周安装量

153 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill react-component-architecture

React TypeScript JavaScript 框架

🇨🇳中文介绍

React 组件架构

概述

使用现代模式构建可扩展、可维护的 React 组件，包括函数式组件、Hooks、组合以及用于类型安全的 TypeScript。

适用场景

组件库设计
大型 React 应用
可复用的 UI 模式
自定义 Hooks 开发
性能优化

快速开始

最小工作示例：

// Button.tsx
import React, { useState, useCallback } from 'react';

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  disabled = false,
  onClick,
  children
}) => {
  const variantStyles = {
    primary: 'bg-blue-500 hover:bg-blue-600',
    secondary: 'bg-gray-500 hover:bg-gray-600',
    danger: 'bg-red-500 hover:bg-red-600'
  };

  const sizeStyles = {
// ... (完整实现请参阅参考指南)

参考指南

references/ 目录下的详细实现：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

指南	内容
带 Hooks 的函数式组件	带 Hooks 的函数式组件
自定义 Hooks 模式	自定义 Hooks 模式
组合模式	组合模式
高阶组件 (HOC)	高阶组件 (HOC)
Render Props 模式	Render Props 模式

🇺🇸English

React Component Architecture

Overview
When to Use
Quick Start
Reference Guides
Best Practices

Overview

Build scalable, maintainable React components using modern patterns including functional components, hooks, composition, and TypeScript for type safety.

When to Use

Component library design
Large-scale React applications
Reusable UI patterns
Custom hooks development
Performance optimization

Quick Start

Minimal working example:

// Button.tsx
import React, { useState, useCallback } from 'react';

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  disabled = false,
  onClick,
  children
}) => {
  const variantStyles = {
    primary: 'bg-blue-500 hover:bg-blue-600',
    secondary: 'bg-gray-500 hover:bg-gray-600',
    danger: 'bg-red-500 hover:bg-red-600'
  };

  const sizeStyles = {
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Functional Component with Hooks	Functional Component with Hooks
Custom Hooks Pattern	Custom Hooks Pattern
Composition Pattern	Composition Pattern
Higher-Order Component (HOC)	Higher-Order Component (HOC)
Render Props Pattern	Render Props Pattern

Best Practices

✅ DO

Follow established patterns and conventions
Write clean, maintainable code
Add appropriate documentation
Test thoroughly before deploying

❌ DON'T

Skip testing or validation
Ignore error handling
Hard-code configuration values

Weekly Installs

165

Repository

aj-geddes/usefu…-prompts

GitHub Stars

116

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode141

gemini-cli140

codex133

claude-code126

cursor120

github-copilot117