Rumah >hujung hadapan web >tutorial js >Mengapa kita harus mengelakkan alat `objek` dalam reaksi
Dalam React, menghantar objek ke props akan mencetuskan re -rendering (anda perlu menggunakan
useMemo
Jika boleh, nilai asal hendaklah diluluskan kepada 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
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!