为啥在使用 react-table 时使用 `useTable` 而不是 `ReactTable`

Posted 2023-02-19

【中文标题】为啥在使用 react-table 时使用 `useTable` 而不是 `ReactTable`

【英文标题】：Why use `useTable` over `ReactTable` when using react-table为什么在使用 react-table 时使用 `useTable` 而不是 `ReactTable`

【发布时间】：2020-03-15 09:07:43

【问题描述】：

在他们的npm page上，例子展示了<ReactTable>组件的用法：

import ReactTable from 'react-table'
...
render() 
  return (
    <ReactTable
      data=data
      columns=columns
    />
  )

但是，在他们的API Docs 和examples 上，他们都使用useTable。

import  useTable  from 'react-table';

function Table( columns, data ) 
  // Use the state and functions returned from useTable to build your UI
  const 
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
   = useTable(
    columns,
    data,
  )

  // Render the UI for your table
  return (
    <table ...getTableProps()>
      <thead>
        headerGroups.map(headerGroup => (
          <tr ...headerGroup.getHeaderGroupProps()>
            headerGroup.headers.map(column => (
              <th ...column.getHeaderProps()>column.render('Header')</th>
            ))
          </tr>
        ))
      </thead>
      <tbody ...getTableBodyProps()>
        rows.map(
          (row, i) => 
            prepareRow(row);
            return (
              <tr ...row.getRowProps()>
                row.cells.map(cell => 
                  return <td ...cell.getCellProps()>cell.render('Cell')</td>
                )
              </tr>
            )
        )
      </tbody>
    </table>
  )


...

render () 
  return (
    <Table columns=columns data=data />
  )

所以，我的问题是：为什么有人会使用钩子（useTable、useFilters 等...）并制作 Table 组件，而他/她只能使用已经提供的组件。 我很确定他们没有忘记更新他们的 npm 页面的示例......或者他们是吗？

【问题讨论】：

npm 页面显示“此文档适用于 react-table 的 version 6。”所以npm页面上的github链接不正确。当您执行yarn add react-table 时，您将获得第 6 版，因为第 7 版尚未发布。

react-table v7 还不是候选发布版本，这就是为什么他们还没有在 npm 中完全宣传它的原因。在 NPM 页面的底部，您可以看到他们正在寻求赞助以使其成型以供发布。我已经添加了一个关于你为什么要使用它而不是 ReactTable 的答案。

【参考方案1】：

react-table v7 是一个“headless”UI 库，这意味着它只提供后端表格功能，并且需要您使用自己的 React 组件来实现表格的渲染。

这意味着您可以将后端表格代码应用于您想要的任何表格样式（例如 Bootstrap、Material UI、vanilla html 等），并且您可以精确控制将这个库连接到 UI 的位置.

大多数表库（包括 react-table pre v7！）都有预定义的功能和行为，在某些情况下可能不适合您；但是，当使用 react-table v7 时，您可以通过实现自己的 UI 代码然后将其连接到您的 react-table 挂钩代码来满足这些情况。

【讨论】：

感谢您的解释，但我认为这会使该模块更加复杂。我们必须为过滤器/分页等编写完整的代码。此外，管理 UI 和 CSS 是开销。有没有办法对旧的严格？如果是，这是一个好方法吗？请指导。

您不需要为过滤器和分页编写完整的代码，因为您可以使用 react-table useFilters 和 usePagination 挂钩。但是，是的，您需要管理您选择的任何类型的表格标记的 UI 和 CSS。