Rumah >hujung hadapan web >tutorial js >Mengapa kita harus mengelakkan alat `objek` dalam reaksi

Mengapa kita harus mengelakkan alat `objek` dalam reaksi

Linda Hamilton
Linda Hamiltonasal
2025-01-25 20:32:11592semak imbas

Why Should We Avoid `object` Props in React

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 ...

!
<code class="language-javascript">Object.is(
  { hello: "world" },
  { hello: "world" },
);</code>

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:

<code class="language-javascript">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>;
});</code>

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.

<code class="language-javascript">const Parent = () => {
  const user = React.useMemo(() => ({ name: "Lee", age: 30 }), []);

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

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.
<code class="language-javascript">const Parent = () => {
  const user = { name: "Lee", age: 30 };

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

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn