React Hooks + Antd：轻松打造高效列表页

2023-09-28 02:20:34

使用 React Hooks 和 Antd 构建高效列表页

数据展示

在列表页中，数据展示至关重要。我们可以使用 useEffect 钩子从服务器获取数据，然后使用 useState 钩子存储数据。可以使用 Antd 的 Table 组件展示数据，该组件提供开箱即用的排序、筛选和分页功能。

const [data, setData] = useState([]);

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://example.com/api/data');
    const data = await response.json();
    setData(data);
  };
  fetchData();
}, []);

<Table columns={columns} dataSource={data} loading={loading} pagination={false} />

动态渲染

有时我们需要根据某些条件动态渲染内容。我们可以使用条件渲染语句（例如 if-else 或三元运算符）来根据条件显示或隐藏元素。例如，我们可以显示一个加载指示符，直到数据加载完成。

{data.length > 0 ? (
  <Table columns={columns} dataSource={data} loading={loading} pagination={false} />
) : (
  <div>加载中...</div>
)}

表单验证

在列表页中，表单验证对于确保提交的数据有效至关重要。我们可以使用 Antd 的 Form 组件进行表单验证，该组件提供内置的验证规则和错误处理。

const [form] = Form.useForm();

const onFinish = (values) => {
  // 验证通过后的处理逻辑
};

<Form form={form} onFinish={onFinish}>
  <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]}>
    <Input />
  </Form.Item>
  <Form.Item label="邮箱" name="email" rules={[{ required: true, message: '请输入邮箱' }]}>
    <Input />
  </Form.Item>
  <Button type="primary" htmlType="submit">提交</Button>
</Form>

路由导航

在列表页中，我们可能需要导航到其他页面。我们可以使用 React Router 来管理路由导航，该库提供了 useHistory 钩子，我们可以使用它来获取历史记录对象并进行导航。

import { useHistory } from 'react-router-dom';

const history = useHistory();

const handleClick = () => {
  history.push('/detail');
};

<Button onClick={handleClick}>查看详情</Button>

状态管理

在复杂列表页中，状态管理至关重要。我们可以使用 Redux 来集中管理应用程序的状态，这有助于保持代码的可维护性和可预测性。

import { useSelector, useDispatch } from 'react-redux';

const data = useSelector((state) => state.data);
const dispatch = useDispatch();

useEffect(() => {
  dispatch({ type: 'GET_DATA' });
}, []);