02-react-typescript

React + TypeScript 开发规范

📋 组件开发规范

1. 组件定义

// ✅ 推荐: 使用函数组件 + TypeScript
interface UserProfileProps {
  userId: string;
  onUpdate?: (user: User) => void;
}

export const UserProfile: React.FC<UserProfileProps> = ({ userId, onUpdate }) => {
  const [loading, setLoading] = useState(false);
  
  return <div>...</div>;
};

2. Props类型定义

• 总是为Props定义接口
• 使用可选属性标记 ?
• 提供默认值

interface ButtonProps {
  label: string;
  variant?: 'primary' | 'secondary' | 'outline';
  disabled?: boolean;
  onClick?: () => void;
}

export const Button: React.FC<ButtonProps> = ({ 
  label, 
  variant = 'primary',
  disabled = false,
  onClick 
}) => {
  return <button className={`btn-${variant}`} disabled={disabled} onClick={onClick}>
    {label}
  </button>;
};

3. Hooks使用规范

// ✅ 推荐: 自定义Hook
export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
};

// 在组件中使用
const MyComponent: React.FC = () => {
  const { user, login, logout } = useAuth();
  // ...
};

4. 状态管理

// ✅ 推荐: 使用Context API
interface AuthContextType {
  user: User | null;
  isAuthenticated: boolean;
  login: (token: string) => Promise<void>;
  logout: () => void;
}

export const AuthContext = createContext<AuthContextType | undefined>(undefined);

export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<User | null>(null);
  
  const login = async (token: string) => {
    // 实现登录逻辑
  };
  
  return (
    <AuthContext.Provider value={{ user, isAuthenticated: !!user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

5. 错误处理

// ✅ 推荐: 使用错误边界
export const ErrorBoundary: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [hasError, setHasError] = useState(false);
  
  useEffect(() => {
    const handleError = (error: Error) => {
      console.error('Error caught:', error);
      setHasError(true);
    };
    
    window.addEventListener('error', handleError);
    return () => window.removeEventListener('error', handleError);
  }, []);
  
  if (hasError) {
    return <div>Something went wrong</div>;
  }
  
  return <>{children}</>;
};