Kullanan bir örnekle daha yeni yanıt React.useState
Durumu ana bileşende tutmak önerilen yoldur. Ebeveynin iki çocuk bileşeninde yönettiği için ona erişmesi gerekir. Redux tarafından yönetilen gibi küresel devlet taşıyarak, bir değil neden aynı aynı nedenle önerilen genel değişken yerel kötüdür yazılım mühendisliğinde genel olarak.
Durum üst bileşendeyken, üst öğe alt öğeye valueve onChangeişleyiciye destek verirse çocuk bunu değiştirebilir (bazen değer bağlantısı veya durum bağlantısı deseni olarak adlandırılır ). Kancalarla nasıl yapacağınız aşağıda açıklanmıştır:
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>
}
Ana bileşenin tamamı alt öğedeki giriş değişikliğinde yeniden oluşturulur; bu, üst bileşenin yeniden oluşturulması küçük / hızlıysa sorun olmayabilir. Ana bileşenin yeniden oluşturma performansı hala genel durumda bir sorun olabilir (örneğin büyük formlar). Bu sizin durumunuzda çözülmüş bir sorundur (aşağıya bakınız).
Hookstate gibi 3. taraf kitaplığını kullanarak durum bağlantı düzenini ve üst öğeyi yeniden oluşturmayı uygulamak daha kolaydır - sizinkiReact.useState de dahil olmak üzere çeşitli kullanım durumlarını kapsayacak şekilde süper şarj edilir. (Feragatname: Projenin yazarıyım).
Hookstate ile böyle görünecekti. Child1girişi değiştirecek, Child2tepki verecektir. Parentdevleti elinde tutacaktır ancak devlet değişikliğinde yeniden yaratmayacak, sadece Child1ve Child2yapacak.
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>
}
Not: orada çoktur fazla örnek burada içe geçmiş veriler, devlet doğrulama, küresel devlet dahil olmak üzere benzer ve daha karmaşık senaryolar kapsayan setStatevb kanca, Otelde ayrıca çevrimiçi tam örnek uygulama Hookstate kullanır ve teknik yukarıda açıkladı.
