公共Hooks封装useTableData表格数据实例

当我们在使用React构建表格数据时，很多情况下需要对表格数据进行筛选、排序、分页等操作，这些操作对于表格组件的开发工作会带来较大的复杂度，同时也会使得表格组件的复用性较差。而React提供的Hook机制可帮助开发者更方便地组织组件逻辑，因此，我们可以利用React的Hook机制来封装一个公共的表格数据处理Hook。

1. Hook函数的结构
   我们可以将表格数据的处理逻辑封装至一个自定义Hook中，该Hook可被其他表格组件复用。在该Hook中，我们需要定义数据查询条件、表格数据和表格操作等状态，并通过Hook的形式暴露这些状态和函数供其他组件使用。

import { useState, useEffect } from 'react';

const useTableData = (defaultParams) => {
  const [params, setParams] = useState(defaultParams); // 查询条件
  const [data, setData] = useState([]); // 表格数据
  const [total, setTotal] = useState(0); // 总数
  const [loading, setLoading] = useState(false); // 加载状态

  const fetchData = async () => {
    setLoading(true);
    const res = await fetch('/api/tableData', { method: 'POST', body: JSON.stringify(params) });
    const { data, total } = await res.json();
    setLoading(false);
    setData(data);
    setTotal(total);
  };

  useEffect(() => {
    fetchData();
  }, [params]);

  return {
    params,
    setParams,
    data,
    total,
    loading
  };
};

export default useTableData;

在封装完一个表格数据处理Hook之后，我们可以在不同的表格组件中通过调用该Hook来使用这些查询、筛选和分页等操作。下面提供两个示例：

1. 示例1：简单表格组件

import React from 'react';
import useTableData from './useTableData';

const SimpleTable = () => {
  const { data, loading } = useTableData({ page: 1, size: 10 });

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => (
            <tr key={index}>
              <td>{item.column1}</td>
              <td>{item.column2}</td>
              <td>{item.column3}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default SimpleTable;

该示例中的SimpleTable组件仅需要用到查询条件和表格数据，因此我们可以通过调用useTableData Hook来获取相关状态，然后在页面上渲染表格数据即可。

1. 示例2：实现带分页的表格组件

import React from 'react';
import useTableData from './useTableData';

const PageTable = () => {
  const { params, setParams, data, total, loading } = useTableData({ page: 1, size: 10 });

  const onPageChange = (page) => {
    setParams({ ...params, page });
  };

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => (
            <tr key={index}>
              <td>{item.column1}</td>
              <td>{item.column2}</td>
              <td>{item.column3}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <div>
        <button disabled={params.page === 1} onClick={() => onPageChange(params.page - 1)}>Prev</button>
        <span>{params.page} / {Math.ceil(total / params.size)}</span>
        <button disabled={params.page === Math.ceil(total / params.size)} onClick={() => onPageChange(params.page + 1)}>Next</button>
      </div>
    </div>
  );
};

export default PageTable;

该示例中的PageTable组件需要用到查询条件、表格数据和分页操作，因此我们可以通过调用useTableData Hook来获取相关状态和分页操作函数，然后在页面上渲染表格数据和分页操作组件。每次分页操作时，我们可以通过setParams()函数来更新查询条件的page参数，并重新获取表格数据。

阅读剩余 64%