React - Menggunakan useMemo() masih menyebabkan input papan kekunci menjadi perlahan

Question

Saya mempunyai kod ini, yang mempunyai banyak kotak input, setiap kotak input digunakan untuk mengubah suai nilai harga. Oleh kerana terdapat banyak kotak input (3 harga setiap kawasan dan 3 harga setiap harga), untuk mengelakkan memaparkan semula semuanya setiap kali, saya menggunakan useMemo pada fungsi yang mengemas kini nilai kotak input, dan sebagai tambahan kepada Selain itu , saya juga menggunakan useReducer untuk mengelakkan kod terlalu panjang untuk mengawal kotak input.

Walau bagaimanapun, memasukkan aksara (atau nombor) tidak dipaparkan serta-merta, tetapi mengambil masa yang singkat untuk dipaparkan, apatah lagi input berterusan.

const handleUpdate = useMemo(
    () => (harta, nilai, obid) =>
      penghantaran({ jenis: "DATA_KEMASKINI", harta, muatan: nilai, id: obid });
    },
    [penghantaran]
  );</pra>
<p>Dan terdapat juga pengurang:</p>
<pre class="brush:php;toolbar:false;">fungsi pengurang(keadaan, tindakan) {
    suis (action.type) {
...
kes "UPDATE_DATA":
        kembali {
          ... negeri,
          data: state.data.map((item) => {
            if (item.id === action.id) {
              pulangkan { ...item, [action.property]: action.payload };
            }
            pulangkan barang;
          }),
        };
}
}

Saya mengesyorkan anda menyemak keseluruhan kod, kerana masalah (atau penyelesaian) mungkin terletak di tempat lain. Untuk melihat keseluruhan kod anda boleh merujuk pautan kotak kod pasir ini. Harap maafkan saya kerana menyalin sebahagian daripada kod, yang mengakibatkan format css yang lemah. Ambil perhatian bahawa fungsi ambil telah digantikan dengan susunan data simulasi yang panjang.

Pautan: https://codesandbox.io/s/unruffled-feynman-g9nox2?file=/src/App.js

Answer 1

Biasanya, useMemo 的作用是在渲染期间缓存昂贵计算的值。然而，在您的情况下，您没有任何昂贵的渲染计算；每次输入更改时，您只是渲染一个非常大的树。实际上，因为所有状态都在Apppada komponen, jadi keseluruhan apl dipaparkan semula setiap kali.

Cara untuk mengoptimumkan masalah ini dalam React ialah dengan melangkau komponen pemaparan apabila boleh. Untuk melakukan ini, bahagikan bahagian halaman yang tidak berkaitan kepada komponen yang berbeza. Sebaik sahaja anda memisahkan logik, bungkusnya dengan React.memo(), teknik pengoptimuman berbeza yang boleh melangkau pemaparan komponen sepenuhnya.

Bagi saya, perubahan paling ketara yang boleh anda lakukan ialah:

1. akan menjadi komponen TodosDatos移出App kerana ia tetap dan tidak perlu ditakrifkan semula pada setiap render (yang boleh mengambil ingatan).
2. Letakkan <Table> anda ke dalam komponen baharu dan gunakan <Table>放入一个新的组件中，并使用React.memo() untuk mengingatinya. Pastikan untuk menghantar semua nilai kebergantungan jadual kepada prop komponen baharu.

Saya melaksanakan perubahan ini di sini: https://codesandbox.io/s/green-breeze-mmum6n?file=/src/App.js. Anda kini harus perasan bahawa menaip hampir serta-merta. Anda juga boleh melakukan berbilang pengoptimuman di tempat lain untuk mendapatkan prestasi yang lebih baik.