React编码时，什么时候用js文件，什么时候用jsx文件？-优快云博客

在 React 项目中，JSX 和 JS 文件的选择主要取决于文件的用途和内容。以下是详细说明：

使用 JSX 文件的情况：
- React 组件文件
- 包含 JSX 语法（类似 HTML 的语法）
- 需要渲染 UI 的文件

示例：

// Component.jsx
import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
};

export default MyComponent;

使用 JS 文件的情况：
- 工具函数
- 常量定义
- 配置文件
- API 调用
- 纯数据处理逻辑
- 自定义 hooks（虽然包含 JSX，但通常使用 .js 扩展名）

示例：

// utils.js
export const formatDate = (date) => {
  return new Date(date).toLocaleDateString();
};

export const validateEmail = (email) => {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
};

// constants.js
export const API_ENDPOINTS = {
  USERS: '/api/users',
  POSTS: '/api/posts'
};

export const STATUS = {
  PENDING: 'pending',
  APPROVED: 'approved',
  REJECTED: 'rejected'
};

最佳实践建议：

a) 组件文件：
- 使用 .jsx 扩展名
- 包含 JSX 语法
- 导出 React 组件
b) 逻辑文件：
- 使用 .js 扩展名
- 包含纯 JavaScript 代码
- 不包含 JSX 语法
c) Hooks 文件：
- 通常使用 .js 扩展名
- 即使内部使用了 JSX，也推荐使用 .js
- 示例：
```
// hooks/useCustomHook.js
import { useState } from 'react';

export const useCustomHook = () => {
  const [state, setState] = useState(null);
  // hook 逻辑
  return { state, setState };
};
```
项目结构示例：

src/
  components/
    Button.jsx
    Modal.jsx
    Form.jsx
  hooks/
    useAuth.js
    useApi.js
  utils/
    helpers.js
    constants.js
    validators.js
  services/
    api.js
    auth.js

特殊情况：

a) 配置文件：
- 即使包含类似 JSX 的配置，也使用 .js
```
// config/routes.js
export const routes = [
  {
    path: '/',
    component: Home
  }
];
```
b) 测试文件：
- 通常使用 .test.js 或 .spec.js
- 即使测试 JSX 组件也使用 .js
团队约定：
- 保持一致性最重要
- 在团队内部统一规范
- 可以在 .eslintrc 中配置规则
构建工具配置：
- 大多数现代构建工具（如 Webpack, Vite）都能正确处理两种扩展名
- 可以在配置中指定解析规则