Jawaban yang lebih baru dengan contoh, yang menggunakan React.useState
Menjaga status dalam komponen induk adalah cara yang disarankan. Orang tua perlu memiliki akses ke sana karena mengaturnya di dua komponen anak-anak. Memindahkannya ke kondisi global, seperti yang dikelola oleh Redux, tidak direkomendasikan untuk alasan yang sama mengapa variabel global lebih buruk daripada lokal pada umumnya dalam rekayasa perangkat lunak.
Ketika status berada dalam komponen induk, anak dapat memutasinya jika orangtua memberikan anak valuedan onChangepawang dalam alat peraga (kadang-kadang disebut tautan nilai atau pola tautan negara ). Inilah cara Anda melakukannya dengan kait:
function Parent() {
var [state, setState] = React.useState('initial input value');
return <>
<Child1 value={state} onChange={(v) => setState(v)} />
<Child2 value={state}>
</>
}
function Child1(props) {
return <input
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
}
function Child2(props) {
return <p>Content of the state {props.value}</p>
}
Seluruh komponen induk akan merender ulang pada input input pada anak, yang mungkin tidak menjadi masalah jika komponen induk kecil / cepat untuk dirender ulang. Kinerja ulang membuat komponen induk masih bisa menjadi masalah dalam kasus umum (misalnya bentuk besar). Ini masalah yang diselesaikan dalam kasus Anda (lihat di bawah).
Pola tautan negara dan tidak ada render ulang orang tua lebih mudah diterapkan menggunakan perpustakaan pihak ke-3, seperti Hookstate - supercharged React.useStateuntuk mencakup berbagai kasus penggunaan, termasuk yang Anda miliki . (Penafian: Saya seorang penulis proyek).
Begini tampilannya dengan Hookstate. Child1akan mengubah input, Child2akan bereaksi padanya. Parentakan memegang negara tetapi tidak akan membuat kembali saat perubahan negara, hanya Child1dan Child2akan.
import { useStateLink } from '@hookstate/core';
function Parent() {
var state = useStateLink('initial input value');
return <>
<Child1 state={state} />
<Child2 state={state}>
</>
}
function Child1(props) {
// to avoid parent re-render use local state,
// could use `props.state` instead of `state` below instead
var state = useStateLink(props.state)
return <input
value={state.get()}
onChange={e => state.set(e.target.value)}
/>
}
function Child2(props) {
// to avoid parent re-render use local state,
// could use `props.state` instead of `state` below instead
var state = useStateLink(props.state)
return <p>Content of the state {state.get()}</p>
}
PS: ada banyak contoh di sini yang mencakup skenario yang serupa dan lebih rumit, termasuk data yang bersarang dalam, validasi negara, keadaan global dengan setStatekait, dll. Ada juga contoh aplikasi online lengkap , yang menggunakan Hookstate dan teknik yang dijelaskan di atas.
