Mengapa kita harus mengelakkan alat `objek` dalam reaksi

bertindak balas dalam reaksi objek props

Dalam React, menghantar objek ke props akan mencetuskan re -rendering (anda perlu menggunakan

untuk mengelakkan ini).
• useMemo Jika boleh, nilai asal hendaklah diluluskan kepada prop.
• membongkar komponen yang melewati lebih banyak alat peraga ke dalam pelbagai komponen yang lebih kecil.
bagaimana untuk mengesan perubahan prop

React menggunakan "perbandingan cetek" untuk mengesan sebarang perubahan dalam prop dan status. Khususnya, ia menggunakan sintaks JavaScript untuk membandingkan. Jadi, apakah hasil dari kod berikut?

Object.is() Jawapannya ...

!

Object.is(
  { hello: "world" },
  { hello: "world" },
);

Walaupun kedua -dua objek kelihatan sama, objek JavaScript diluluskan mengikut rujukan, yang bermaksud bahawa walaupun mereka kelihatan sama, mereka bukan objek yang sama: mereka mempunyai pengedaran yang berbeza dalam ingatan. false Oleh itu, walaupun komponen kanak -kanak dioptimumkan oleh

, ia masih akan menjadi semula:

kita boleh mengelakkan re -rendering yang tidak perlu dengan menggunakan cangkuk reaksi yang betul memo:

const Parent = () => {
  const user = { name: "Lee", age: 30 };

  return <Child user={user} />;
};

// Child 组件重新渲染
const Child = React.memo(({ user }: { user: { name: string; age: number } }) => {
  console.log("Child 渲染");
  return <div>{user.name}</div>;
});

tetapi, <<> dan useMemo harus digunakan untuk pengiraan "mahal". Dalam contoh kami, objek mudah hanya dua kunci dan nilai rentetan tidak "mahal." Kami memerlukan penyelesaian lain.

const Parent = () => {
  const user = React.useMemo(() => ({ name: "Lee", age: 30 }), []);

  return <Child user={user} />;
};

Lulus nilai asal ke prop

useMemo useCallback Jika boleh, sebaiknya lulus nilai asal sebagai alat peraga. Contohnya:

Dalam contoh ini, tidak mudah untuk lulus setiap kunci kepada alat komponen kanak -kanak. Walau bagaimanapun, kadang -kadang kita perlu memproses objek besar dengan lebih daripada 10 nilai utama. <建> Buat komponen lain (prinsip tanggungjawab tunggal)

Jika kita mengikuti prinsip pepejal, kita boleh mempertimbangkan untuk membuat beberapa komponen yang lebih kecil untuk memproses setiap prop. Atau, sekurang -kurangnya nilai utama objek diberikan kepada pelbagai komponen.

const Parent = () => {
  const user = { name: "Lee", age: 30 };

  return <Child age={user.age} name={user.name} />;
};

Atas ialah kandungan terperinci Mengapa kita harus mengelakkan alat `objek` dalam reaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!