React 代码编写规范大全

xqzqikn578115dmo

318人浏览 · 2025-09-09 16:38:48

xqzqikn578115dmo · 2025-09-09 16:38:48 发布

React 代码编写规范

组件命名

组件名称采用大驼峰式命名（PascalCase），与文件名保持一致。例如：UserProfile.jsx 应包含一个名为 UserProfile 的组件。避免使用缩写或模糊的命名。

文件结构

将相关文件组织在同一个目录下，例如组件、样式和测试文件。推荐按功能或模块划分目录结构，而非按文件类型划分。

components/
  UserProfile/
    UserProfile.jsx
    UserProfile.css
    UserProfile.test.js

函数组件与Hooks

优先使用函数组件和Hooks而非类组件。Hooks的调用顺序必须保持一致，且不能在条件或循环中使用。自定义Hook应以use前缀命名，例如useFetchData。

状态管理

避免过度使用useState，复杂状态逻辑应使用useReducer或状态管理库（如Redux、Zustand）。将状态提升到最近的共同父组件，避免不必要的全局状态。

Props传递

使用TypeScript或PropTypes定义组件Props的类型。避免直接传递整个对象，而是解构出需要的属性。布尔类型的Prop默认值应为false。

interface ButtonProps {
  label: string;
  disabled?: boolean;
}

const Button = ({ label, disabled = false }: ButtonProps) => (
  <button disabled={disabled}>{label}</button>
);

样式管理

推荐使用CSS-in-JS方案（如Styled-components或Emotion），或CSS Modules避免全局样式污染。避免在组件中写内联样式，除非是动态样式。

事件处理

事件处理函数应以handle前缀命名，例如handleClick。使用箭头函数或在构造函数中绑定以避免不必要的重新渲染。

const handleSubmit = (e) => {
  e.preventDefault();
  // 处理逻辑
};

return <form onSubmit={handleSubmit}>...</form>;

代码格式化

使用Prettier和ESLint确保代码风格一致。配置规则包括：2个空格缩进、单引号、结尾分号等。提交前自动格式化代码。

性能优化

使用React.memo记忆化组件，避免不必要的渲染。对于大型列表，使用react-window或react-virtualized实现虚拟滚动。复杂计算使用useMemo，函数引用使用useCallback。

测试规范

为每个组件编写单元测试（Jest + React Testing Library）。测试覆盖率至少达到80%。避免测试实现细节，聚焦于用户交互和行为。

注释与文档

为复杂逻辑添加清晰注释，但避免过度注释显而易见的代码。使用JSDoc为公共组件和函数生成文档。重大变更需更新CHANGELOG.md。

代码拆分

使用React.lazy和Suspense实现路由级或组件级懒加载。动态导入第三方库或非关键组件以减小初始包体积。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<Spinner />}>
      <LazyComponent />
    </Suspense>
  );
}

错误边界

为应用添加错误边界（Error Boundaries）捕获组件树中的JavaScript错误，避免整个应用崩溃。记录错误信息并显示降级UI。

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    logErrorToService(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <FallbackUI />;
    }
    return this.props.children;
  }
}