क्या componentDidMountहुक के माध्यम से प्रतिक्रियाशील कार्यात्मक घटकों में अनुकरण करने के तरीके हैं?
जवाबों:
हुक के स्थिर संस्करण के लिए (प्रतिक्रिया संस्करण 16.8.0+)
के लिये componentDidMount
useEffect(() => {
// Your code here
}, []);
के लिये componentDidUpdate
useEffect(() => {
// Your code here
}, [yourDependency]);
के लिये componentWillUnmount
useEffect(() => {
// componentWillUnmount
return () => {
// Your code here
}
}, [yourDependency]);
तो इस स्थिति में, आपको अपनी निर्भरता इस सरणी में पास करने की आवश्यकता है। मान लेते हैं कि आपके पास एक राज्य है
const [count, setCount] = useState(0);
और जब भी गिनती बढ़ती है तो आप अपने फ़ंक्शन घटक को फिर से प्रस्तुत करना चाहते हैं। फिर आपका useEffectइस तरह दिखना चाहिए
useEffect(() => {
// <div>{count}</div>
}, [count]);
इस तरह जब भी आपकी गणना आपके घटक को अपडेट करती है तो वह फिर से प्रस्तुत करेगा। उम्मीद है कि इससे थोड़ी मदद मिलेगी।
useState। इसे पढ़ने वाले किसी भी व्यक्ति के लिए, कृपया ध्यान रखें कि दूसरा तर्क छोड़ने से undefinedआपके प्रभाव को हर रेंडर पर ट्रिगर किया जाएगा (यदि मैं गलत नहीं हूं)।
यद्यपि उत्तर कार्यों को स्वीकार किया जाता है, लेकिन यह अनुशंसित नहीं है। जब आपके पास एक से अधिक राज्य होते हैं और आप इसे उपयोग के साथ उपयोग करते हैं, तो यह आपको निर्भरता सरणी में जोड़ने या इसका उपयोग न करने के बारे में चेतावनी देगा।
यह कभी-कभी समस्या का कारण बनता है जो आपको अप्रत्याशित उत्पादन दे सकता है। इसलिए मेरा सुझाव है कि आप वर्ग के रूप में अपने कार्य को फिर से लिखने के लिए थोड़ा प्रयास करें। बहुत कम परिवर्तन हैं, और आपके पास कुछ घटक कक्षा के रूप में हो सकते हैं और कुछ फ़ंक्शन के रूप में। आप केवल एक सम्मेलन का उपयोग करने के लिए बाध्य नहीं हैं।
उदाहरण के लिए इसे लें
function App() {
const [appointments, setAppointments] = useState([]);
const [aptId, setAptId] = useState(1);
useEffect(() => {
fetch('./data.json')
.then(response => response.json())
.then(result => {
const apts = result.map(item => {
item.aptId = aptId;
console.log(aptId);
setAptId(aptId + 1);
return item;
})
setAppointments(apts);
});
}, []);
return(...);
}
तथा
class App extends Component {
constructor() {
super();
this.state = {
appointments: [],
aptId: 1,
}
}
componentDidMount() {
fetch('./data.json')
.then(response => response.json())
.then(result => {
const apts = result.map(item => {
item.aptId = this.state.aptId;
this.setState({aptId: this.state.aptId + 1});
console.log(this.state.aptId);
return item;
});
this.setState({appointments: apts});
});
}
render(...);
}
यह केवल उदाहरण के लिए है । इसलिए कोड के साथ सर्वोत्तम प्रथाओं या संभावित मुद्दों के बारे में बात नहीं करने देता। इस दोनों में एक ही तर्क है लेकिन बाद में उम्मीद के मुताबिक ही काम होता है। हो सकता है कि आपको इस समय का उपयोग चल रहा हो, लेकिन जब आपका ऐप बढ़ता है, तो संभावना है कि आप कुछ मुद्दों का सामना करें। इसलिए, उस चरण में पुनर्लेखन के बजाय, प्रारंभिक चरण में ऐसा करना बेहतर है।
इसके अलावा, OOP उतना बुरा नहीं है, अगर प्रोसीजर-ओरिएंटेड प्रोग्रामिंग पर्याप्त था, तो हमारे पास ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग कभी नहीं होगा। यह कभी-कभी दर्दनाक होता है, लेकिन बेहतर (तकनीकी रूप से व्यक्तिगत मुद्दे एक तरफ)।
componentDidMountकार्यात्मक घटकों पर कोई नहीं है , लेकिन रिएक्ट हुक एक तरीका प्रदान करते हैं जिससे आप useEffectहुक का उपयोग करके व्यवहार का अनुकरण कर सकते हैं ।
useEffect()केवल खाली कॉल को माउंट पर चलाने के लिए दूसरे तर्क के रूप में एक खाली सरणी पास करें ।
कृपया दस्तावेज़ कोuseEffect पढ़ें ।
function ComponentDidMount() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
console.log('componentDidMount');
}, []);
return (
<div>
<p>componentDidMount: {count} times</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
Click Me
</button>
</div>
);
}
ReactDOM.render(
<div>
<ComponentDidMount />
</div>,
document.querySelector("#app")
);<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>componentDidMountप्रतिक्रिया हुक के लिए कोई सटीक समकक्ष नहीं है ।
मेरे अनुभव में, प्रतिक्रिया करने वाले हुक को विकसित करते समय एक अलग मानसिकता की आवश्यकता होती है और आम तौर पर बोलते हुए आपको इसकी तुलना कक्षा के तरीकों की तरह नहीं करनी चाहिए componentDidMount।
इसके साथ ही कहा, वहाँ तरीके हैं जिनसे आप हुक का प्रयोग कर एक समान प्रभाव उत्पन्न करने के लिए कर सकते हैं करने के लिए componentDidMount।
समाधान 1:
useEffect(() => {
console.log("I have been mounted")
}, [])
समाधान 2:
const num = 5
useEffect(() => {
console.log("I will only run if my deps change: ", num)
}, [num])
समाधान 3 (फ़ंक्शन के साथ):
useEffect(() => {
const someFunc = () => {
console.log("Function being run after/on mount")
}
someFunc()
}, [])
समाधान 4 (उपयोग कॉलबैक):
const msg = "some message"
const myFunc = useCallback(() => {
console.log(msg)
}, [msg])
useEffect(() => {
myFunc()
}, [myFunc])
समाधान 5 (रचनात्मक हो रहा है):
export default function useDidMountHook(callback) {
const didMount = useRef(null)
useEffect(() => {
if (callback && !didMount.current) {
didMount.current = true
callback()
}
})
}
यह ध्यान देने योग्य है कि समाधान 5 का वास्तव में केवल तभी उपयोग किया जाना चाहिए जब कोई अन्य समाधान आपके उपयोग के मामले में काम न करे । यदि आप तय करते हैं कि आपको समाधान 5 की आवश्यकता है तो मैं इस पूर्व-निर्मित हुक उपयोग-किया-माउंट का उपयोग करने की सलाह देता हूं ।
स्रोत (अधिक विवरण के साथ): प्रतिक्रिया हुक में कंपोनेंटडिमाउंट का उपयोग करना
आप उपयोग करना चाहते हैं useEffect(), जो कि आप फ़ंक्शन का उपयोग कैसे करते हैं, इसके आधार पर, कंपोनेंटमाउंट () की तरह कार्य कर सकता है।
उदाहरण के लिए। आप एक कस्टम loadedस्टेट प्रॉपर्टी का उपयोग कर सकते हैं, जो शुरू में गलत पर सेट है, और इसे रेंडर पर सही पर स्विच करें, और केवल इस प्रभाव को बदलने पर प्रभाव को आग लगा दें।