एक उदाहरण के साथ अधिक हालिया उत्तर, जो उपयोग करता है React.useState
राज्य को मूल घटक में रखना अनुशंसित तरीका है। अभिभावक को इस पर अभिगमन करने की आवश्यकता होती है क्योंकि यह दो बच्चों के घटकों में इसका प्रबंधन करता है। इसे वैश्विक स्थिति में ले जाना, जैसे कि Redux द्वारा प्रबंधित, उसी कारण से अनुशंसित नहीं है, क्योंकि वैश्विक परिवर्तन सॉफ्टवेयर इंजीनियरिंग में सामान्य से अधिक खराब है ।
जब राज्य मूल घटक में होता है, तो बच्चा इसे बदल सकता है यदि माता-पिता बच्चे valueऔर onChangeहैंडलर को प्रॉप्स में देते हैं (कभी-कभी इसे मूल्य लिंक या राज्य लिंक पैटर्न कहा जाता है )। यहाँ है कि आप इसे हुक के साथ कैसे करेंगे:
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>
}
पूरे माता-पिता घटक बच्चे में इनपुट परिवर्तन पर फिर से प्रस्तुत करेंगे, जो कि माता-पिता घटक फिर से प्रस्तुत करने के लिए छोटा / तेज़ होने पर कोई समस्या नहीं हो सकती है। मूल घटक का पुन: रेंडर प्रदर्शन अभी भी सामान्य मामले में एक मुद्दा हो सकता है (उदाहरण के लिए बड़े रूप)। यह आपके मामले में हल की गई समस्या है (नीचे देखें)।
राज्य लिंक पैटर्न और कोई भी माता-पिता पुन: रेंडर करना आसान नहीं है, जैसे कि थ्री पार्टी लाइब्रेरी का उपयोग करना, जैसे हुकस्ट्रेट - React.useStateआपके द्वारा एक सहित विभिन्न प्रकार के उपयोग के मामलों को कवर करने के लिए सुपरचार्ज्ड । (अस्वीकरण: मैं परियोजना का एक लेखक हूं)।
यहाँ है कि यह हुकस्टेट के साथ कैसा लगेगा। Child1इनपुट को बदल देगा, Child2उस पर प्रतिक्रिया देगा। Parentराज्य को धारण करेगा, लेकिन राज्य परिवर्तन पर केवल Child1और फिर से रेंडर नहीं Child2करेगा।
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>
}
पुनश्च: ऐसे कई और उदाहरण हैं जो समान रूप से और अधिक जटिल परिदृश्यों को कवर करते हैं, जिसमें गहरी नेस्टेड डेटा, राज्य सत्यापन, setStateहुक के साथ वैश्विक स्थिति आदि शामिल हैं। ऑनलाइन पूर्ण नमूना आवेदन भी है , जो हुकस्टेट और तकनीक का उपयोग करता है।
