问题：React如何实现表格行自动勾选功能？

Question

在使用React开发数据表格时，如何实现表格行的自动勾选功能是常见的需求之一？该问题涉及状态管理、组件通信及勾选逻辑的实现。通常通过维护一个选中行的state数组，并结合复选框组件来实现。当数据更新或满足特定条件时，自动将符合条件的行加入选中数组，并同步更新UI。实现过程中需要注意性能优化、避免不必要的渲染，以及处理受控组件与非受控组件的状态同步问题。此外，还需考虑全选、反选等扩展功能的兼容性。

Answer 1

一、基础实现：使用React状态管理选中行

在React中实现表格行的自动勾选功能，首先需要维护一个选中行的state数组。通常使用useState来管理选中行的ID或对象。

const [selectedRows, setSelectedRows] = useState([]);
  

每一行的复选框通过判断当前行是否存在于selectedRows数组中来决定是否被勾选。

{`<input type="checkbox" checked="{selectedRows.includes(row.id)}" /> handleRowSelect(row.id)} 
/>`}
  

当数据更新或满足特定条件时，自动将符合条件的行加入选中数组，并同步更新UI。

二、状态更新与组件通信

在表格组件中，通常需要将行的勾选状态传递给父组件，或者在多个子组件之间共享状态。可以通过props回调函数实现父子组件通信。

const handleRowSelect = (id) => {
  if (selectedRows.includes(id)) {
    setSelectedRows(selectedRows.filter(rowId => rowId !== id));
  } else {
    setSelectedRows([...selectedRows, id]);
  }
};
  

此外，也可以使用useContext或状态管理库（如Redux）来实现跨层级组件通信。

三、性能优化与避免不必要的渲染

为了提升性能，避免不必要的渲染是关键。可以使用React.memo对表格行组件进行优化。

const TableRow = React.memo(({ row, selectedRows, onSelect }) => {
  return (
    

        <input type="checkbox" checked="{selectedRows.includes(row.id)}" /> onSelect(row.id)} 
        />
      
{row.name}
  );
});
  

此外，对于大量数据的表格，可以结合虚拟滚动技术（如react-window）减少DOM节点数量。

四、受控组件与非受控组件的状态同步

在实现自动勾选逻辑时，需注意受控组件与非受控组件的状态同步问题。

• 受控组件：复选框的状态由React state控制，适用于需要精确状态管理的场景。
• 非受控组件：通过ref获取DOM状态，适用于表单提交等一次性操作。

建议统一使用受控组件进行状态管理，以避免状态不同步带来的问题。

五、扩展功能：全选与反选逻辑

除了单行勾选外，通常还需要实现全选和反选功能。

const handleSelectAll = (e) => {
  if (e.target.checked) {
    setSelectedRows(data.map(row => row.id));
  } else {
    setSelectedRows([]);
  }
};

const handleInvertSelection = () => {
  const allIds = data.map(row => row.id);
  const newSelected = allIds.filter(id => !selectedRows.includes(id));
  setSelectedRows(newSelected);
};
  

全选按钮的状态应根据当前选中行数量与数据总数进行动态判断。

六、流程图：自动勾选逻辑流程

graph TD
      A[初始化选中数组] --> B{数据是否满足条件?}
      B -->|是| C[添加到选中数组]
      B -->|否| D[跳过]
      C --> E[更新UI]
      D --> E
      E --> F{是否触发全选/反选?}
      F --> G[执行全选/反选逻辑]
      F --> H[等待下一次更新]