React hooks 可编辑数据表架构？答案

【问题标题】：React hooks editable data table architecture?React hooks 可编辑数据表架构？
【发布时间】：2021-07-13 05:03:32
【问题描述】：

import produce from "immer";

function useEditableRows(initialRows) {
  // initialRows is 50 rows x 10 columns
  const [rows, setRows] = useState(initialRows);

  function setValue(rowId, colId, value) {    
    const newRows = produce(rows, draft => {
      const row = draft.find(row => row.id === rowId);
      row[colId] = value;
    });
    setRows(newRows);
  }
  
  return { rows, setValue };
}

然后表格被渲染，每个单元格都有一个编辑控件。编辑控件调用 setValue，它会重新呈现表格中的每个单元格，而不仅仅是被编辑的单元格。

我认为的问题是 setValue 函数必须在每次渲染时重新创建并传递给每个单元格，使单元格全部重新渲染。 setValue 必须重新创建，因为它依赖于已更改的行。

我可以在这里做些什么来防止重新渲染所有内容？也许 useRef 可以指向行，而 setValue 可以依赖于 ref，从而允许我用 useCallback 包装 setValue？是不是太过分了？

我应该使用像 Redux 这样的状态管理工具而不是 hooks 来管理行吗？

【问题讨论】：

标签： reactjs redux react-hooks

【解决方案1】：

如果您唯一真正的问题是参考稳定性，您可以使用 useCallback 和 setter 的回调符号，因此它不需要访问 rows：

  const setValue = useCallback(function setValue(rowId, colId, value) {    
    setRows(oldRows => produce(oldRows, draft => {
      const row = draft.find(row => row.id === rowId);
      row[colId] = value;
    }));
  }, [])

但一般来说：如果父组件重新渲染，React 会重新渲染所有子组件，即使没有任何 props 改变。您必须将孩子们包裹在 React.memo 中以避免这种情况。

【讨论】：