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প্রতিটি রেন্ডারে আপনার প্রভাবের সূত্রপাত ঘটবে (যদি আমি ভুল না করি)।
যদিও গৃহীত উত্তরগুলি কাজ করে, এটি প্রস্তাবিত নয়। যখন আপনার একাধিক রাজ্য থাকে এবং আপনি এটি ব্যবহারের সাথে ব্যবহার করেন, এটি আপনাকে নির্ভরতা অ্যারেতে যুক্ত করার বা এটিকে ব্যবহার না করার বিষয়ে সতর্কতা দেয়।
এটি কখনও কখনও সমস্যার কারণ হতে পারে যা আপনাকে অবিশ্বাস্য আউটপুট দিতে পারে। সুতরাং আমি পরামর্শ দিচ্ছি যে আপনি ক্লাস হিসাবে আপনার ফাংশনটি আবার লিখতে একটু চেষ্টা করুন effort খুব সামান্য পরিবর্তন রয়েছে, এবং আপনার শ্রেণি হিসাবে কিছু অংশ এবং ফাংশন হিসাবে থাকতে পারে। আপনি কেবল একটি সম্মেলন ব্যবহার করতে বাধ্য নন।
উদাহরণস্বরূপ এটি গ্রহণ করুন
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(...);
}
এটি কেবল উদাহরণস্বরূপ । সুতরাং কোড সহ সেরা অনুশীলনগুলি বা সম্ভাব্য সমস্যা সম্পর্কে কথা বলতে দেয় না। এই উভয়েরই একই যুক্তি রয়েছে তবে পরে কেবল প্রত্যাশা অনুযায়ী কাজ করে works আপনি এই সময়ের জন্য ব্যবহারের প্রভাবের সাথে কম্পোনেন্টডিডমাউন্ট কার্যকারিতা পেতে পারেন তবে আপনার অ্যাপ্লিকেশনটি বাড়ার সাথে সাথে আপনার কিছু সমস্যার মুখোমুখি হওয়ার সম্ভাবনা রয়েছে। সুতরাং, এই পর্যায়ে পুনর্লিখন না করে, প্রাথমিক পর্যায়ে এটি করা ভাল।
তদুপরি, ওওপি তেমন খারাপ নয়, যদি প্রক্রিয়া-ওরিয়েন্টেড প্রোগ্রামিং যথেষ্ট ছিল, তবে আমাদের কখনই অবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিং না হত। এটি কখনও কখনও বেদনাদায়ক হয়, তবে আরও ভাল (প্রযুক্তিগতভাবে personal ব্যক্তিগত বিষয়গুলি আলাদা করে রাখা হয়)।
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>আপনি ব্যবহার করতে চান useEffect(), যা আপনি কীভাবে ফাংশনটি ব্যবহার করেন তার উপর নির্ভর করে কম্পোনেন্টডিডমাউন্ট () এর মতোই কাজ করতে পারে।
যেমন আপনি loadedপ্রথমে মিথ্যাতে সেট করা একটি কাস্টম স্টেট সম্পত্তি ব্যবহার করতে পারেন , এবং এটি রেন্ডারে সত্যে স্যুইচ করতে পারেন, এবং এই মানটি পরিবর্তিত হলে কেবল প্রভাবটি ছড়িয়ে দিতে পারেন।