小编scr*_*ier的帖子

想象一个允许用户编辑账单（发票）的 React 页面。账单有相当多的可编辑字段，比如 100 个。此外，账单可以有任意数量的行项目。让我们想象一下其中的 100 个，每个都有，比如说，20 个字段。

如果帐单是“父项”，并且由 React 组件呈现，则行项目是“子项”，每个项都由“子”组件呈现。

我在父组件中维护帐单（及其行项目）的状态，感觉不错。

我想在子（行项目）组件中使用受控输入字段。然而，这意味着，至少天真地，即使我明智地使用 React.memo，每次按键都会导致父（账单）组件中的状态更新，以及一些重新渲染。

性能很快变得令人无法接受，即使只有 10 个订单项，例如每次按键延迟 500-800 毫秒。我已经做了一些性能调查，并且有几个可能的答案，但我不打算在这里报告它们，以免阻碍通往最佳答案的任何途径。

必须有一个通用的解决方案，不是吗？我想在没有表单库的情况下这样做，尽管我并不完全反对。

下面的精简示例，只是为了演示基本架构。该示例没有性能问题。:-)

帮助！我缺少保持这种性能的魔力是什么？

const INITIAL_STATE = {
  invoiceNumber: "ABC123",
  customer: "Phil's Dills",
  lineItems: [
    { index: 0, item: "Pickles", quantity: 2 },
    { index: 1, item: "Pickle Juice", quantity: 5 },
  ]
}

export function Bill() {
  const [ bill, setBill ] = useState(INITIAL_STATE);

  function updateBill(updatedLineItem) {
    const newLineItems = [...bill.lineItems];
    newLineItems[updatedLineItem.index] = updatedLineItem;
    setBill({
      ...bill,
      lineItems: newLineItems
    }) …