Senior Frontend Engineer - React Skill

专业的企业级React开发技能，适用于快速构建CRUD应用。

🎯 核心功能

1. 列表页生成

自动生成带有完整功能的列表页：

import { createListPage } from '@/utils/page-generator';

const UserListPage = createListPage({
  entity: 'user',
  columns: [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '邮箱', dataIndex: 'email', key: 'email' },
    { title: '角色', dataIndex: 'role', key: 'role' }
  ],
  actions: ['create', 'edit', 'delete'],
  filters: ['name', 'role']
});

export default UserListPage;

特性：

• ✅ 自动分页
• ✅ 多条件筛选
• ✅ 排序功能
• ✅ 批量操作
• ✅ 导出数据

2. 表单弹窗管理

import { FormDialog } from '@/components/FormDialog';

<FormDialog
  visible={visible}
  title="新建用户"
  fields={[
    { name: 'name', label: '姓名', type: 'input', required: true },
    { name: 'email', label: '邮箱', type: 'email', required: true },
    { name: 'role', label: '角色', type: 'select', options: roleOptions }
  ]}
  onSubmit={handleSubmit}
  onCancel={() => setVisible(false)}
/>

特性：

• ✅ 自动表单验证
• ✅ 异步提交处理
• ✅ 错误提示
• ✅ Loading状态

3. DVA Model集成

// models/user.ts
export default {
  namespace: 'user',

  state: {
    list: [],
    pagination: { current: 1, pageSize: 10, total: 0 }
  },

  effects: {
    *fetchList({ payload }, { call, put }) {
      const response = yield call(services.getUserList, payload);
      yield put({ type: 'saveList', payload: response });
    }
  },

  reducers: {
    saveList(state, { payload }) {
      return {
        ...state,
        list: payload.data,
        pagination: payload.pagination
      };
    }
  }
};

4. API服务层

// services/user.ts
import request from '@/utils/request';

export async function getUserList(params) {
  return request('/api/users', {
    method: 'GET',
    params
  });
}

export async function createUser(data) {
  return request('/api/users', {
    method: 'POST',
    data
  });
}

export async function updateUser(id, data) {
  return request(`/api/users/${id}`, {
    method: 'PUT',
    data
  });
}

export async function deleteUser(id) {
  return request(`/api/users/${id}`, {
    method: 'DELETE'
  });
}

📦 项目结构

src/
├── pages/              # 页面组件
│   ├── User/
│   │   ├── List.tsx
│   │   ├── Detail.tsx
│   │   └── model.ts
│   └── Dashboard/
├── components/         # 通用组件
│   ├── FormDialog/
│   ├── TableList/
│   └── DetailView/
├── services/           # API服务
│   ├── user.ts
│   └── common.ts
├── models/             # DVA模型
│   ├── global.ts
│   └── user.ts
└── utils/              # 工具函数
    ├── request.ts
    └── page-generator.ts

🚀 快速开始

1. 安装依赖

npm install react@16.14 dva@2.x @lianjia/antd-life

2. 配置路由

// router.config.ts
export default [
  {
    path: '/user',
    component: './User/List'
  },
  {
    path: '/user/:id',
    component: './User/Detail'
  }
];

3. 创建页面

使用提供的模板快速创建新页面：

npm run generate:page User

🎨 最佳实践

1. 组件设计

// ✅ 好的实践
interface UserListProps {
  dispatch: Dispatch;
  loading: boolean;
  userList: UserItem[];
}

const UserList: React.FC<UserListProps> = ({
  dispatch,
  loading,
  userList
}) => {
  // 组件逻辑
};

export default connect(({ user, loading }) => ({
  userList: user.list,
  loading: loading.effects['user/fetchList']
}))(UserList);

2. 状态管理

// ✅ 使用DVA管理复杂状态
dispatch({ type: 'user/fetchList', payload: { page: 1 } });

// ❌ 避免直接在组件中请求
const fetchData = async () => {
  const res = await api.getUsers();
  setUsers(res.data);
};

3. 错误处理

// ✅ 统一错误处理
effects: {
  *fetchList({ payload }, { call, put }) {
    try {
      const response = yield call(services.getUserList, payload);
      yield put({ type: 'saveList', payload: response });
    } catch (error) {
      message.error('获取用户列表失败');
      console.error(error);
    }
  }
}

📚 参考资料

• React 16.14 Documentation
• DVA Documentation
• @lianjia/antd-life Components
• TypeScript Handbook

⚠️ 注意事项

1. 版本兼容性

   • React 16.14（不支持React 18）
   • Ant Design 3.x（不支持Ant Design 5）
   • DVA 2.x

2. 性能优化

   • 使用React.memo避免不必要的重渲染
   • 合理使用useCallback和useMemo
   • 虚拟滚动处理大列表

3. 类型安全

   • 所有组件使用TypeScript
   • API响应需要类型定义
   • 避免使用any类型

🔧 故障排除

问题1: DVA model未加载

# 检查model是否正确注册
console.log(app._models);

问题2: 组件未更新

# 检查connect是否正确
export default connect(({ user }) => ({ user }))(Component);

📝 更新日志

v2.1.0 (2024-12-05)

• ✨ 新增批量操作功能
• ✨ 支持自定义筛选器
• 🐛 修复分页重置问题
• 📝 完善文档和示例

v2.0.0 (2024-11-01)

• ✨ 完全重写，支持TypeScript
• ✨ 新增表单弹窗组件
• ✨ 优化API服务层

Made with ❤️ by USK Team