处理超过 200 个以状态存储它们的复选框

Question

我有一个表（父元素），它获取用户并将每一行呈现为它自己的组件。表中的行包含复选框。

目标是能够使用复选框并检索选中的复选框。

问题是，当我将函数传递给每一行（子组件）时，为了触发将选中的复选框值添加到数组（由选定用户的 id 组成），整个组件被重新渲染，它真的很滞后在前端（显然）。我尝试为每个复选框创建 refs，以便仅在需要时检索选中的复选框 - 但是您不能在循环中使用 Refs，而且对于这样的任务似乎不是一件好事。

我的问题是如何处理一个表中的大量复选框，将选中的复选框存储在一个状态中，或者在触发父组件中的函数时能够检索选中的复选框？

const UserRow = ({checked, setChecked) => (
  // render fields
  // ...
  <Checkbox checked={checked} onChange={() => setChecked()} />
)

const ParentComponent = () => {
const [users, setUsers] = useState();
const [checkedCheckboxes, setCheckedCheckboxes] = useState([]);

useEffect(() => {
  // fetch users
  setUsers(fetchedUsers);
});

const rows = users.map(user => <UserRow
        key={id}
        name={user.name}
        email={user.email}
        checked={checkedCheckboxes.includes(id)}
        setChecked={setCheckedCheckboxes(checkedCheckboxes.concat(id)}
      />;

return (
  // render table
  {rows} // inset rows
)}

Answer 1

这是一个优化的函数，它可以在不重新渲染整个列表并使用来自 useState 的列表的情况下切换项目：

import React, { useEffect, useState } from 'react';

const Parent = () => {
  //list is created and maintained in parent
  const [list, setList] = useState([
    { id: 1, val: true },
    { id: 2, val: true },
  ]);
  //toggle is id to indicate what item to toggle
  const [toggle, setToggle] = useState();
  useEffect(() => {
    if (toggle) {
      //setting toggle will not re render until
      //  function is finished so no infinite loop
      setToggle();
      //here we can toggle the item from the list
      setList(
        list.map(item =>
          item.id === toggle
            ? { ...item, val: !item.val }
            : item
        )
      );
    }
  }, [list, toggle]);
  //combining parent container with parent presentational
  //  for simplicity
  return (
    <div>
      {list.map(item => (
        <ItemContainer
          key={item.id}
          item={item}
          //pass setToggle as item clicked
          itemClicked={setToggle}
        />
      ))}
    </div>
  );
};
const ItemContainer = React.memo(function Item({
  item,
  itemClicked,
}) {
  //toggeling item with id 1 will not log
  //  for item with id 2
  console.log('in item render:', item.id);
  return (
    <pre onClick={() => itemClicked(item.id)}>
      {JSON.stringify(item, undefined, 2)}
    </pre>
  );
});

export default Parent;

Here 是一个如何使用 useReducer 的示例。