সম্পাদনা: এটি প্রবর্তনের সাথে সাথে Hooksকার্যক্ষম উপাদানগুলিতে একটি জীবনকালীন আচরণের পাশাপাশি রাজ্যেরও প্রয়োগ করা সম্ভব। এখন
হুক্স একটি নতুন বৈশিষ্ট্য প্রস্তাব যা আপনাকে ক্লাস না লিখে রাজ্য এবং অন্যান্য প্রতিক্রিয়া বৈশিষ্ট্যগুলি ব্যবহার করতে দেয়। এগুলি v16.8.0 এর অংশ হিসাবে প্রতিক্রিয়াতে প্রকাশিত হয়েছে
useEffectহুক জীবনচক্র আচরণ প্রতিলিপি করতে ব্যবহার করা যেতে পারে, এবং useStateএকটি ফাংশন উপাদান মধ্যে রাষ্ট্র সঞ্চয় করতে ব্যবহার করা যেতে পারে।
বেসিক সিনট্যাক্স:
useEffect(callbackFunction, [dependentProps]) => cleanupFunction
আপনি আপনার ব্যবহারের ক্ষেত্রে হুকের মতো প্রয়োগ করতে পারেন
const grid = (props) => {
console.log(props);
let {skuRules} = props;
useEffect(() => {
if(!props.fetched) {
props.fetchRules();
}
console.log('mount it!');
}, []); // passing an empty array as second argument triggers the callback in useEffect only after the initial render thus replicating `componentDidMount` lifecycle behaviour
return(
<Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}>
<Box title="Sku Promotion">
<ActionButtons buttons={actionButtons} />
<SkuRuleGrid
data={skuRules.payload}
fetch={props.fetchSkuRules}
/>
</Box>
</Content>
)
}
useEffectউপাদানটি আনমাউন্ট করা হলে চালানো কোনও ফাংশনও ফিরিয়ে দিতে পারে। শ্রোতার সদস্যতা বাতিল করতে, এর আচরণের প্রতিরূপে এটি ব্যবহার করা যেতে পারে componentWillUnmount:
উদাহরণস্বরূপ: উপাদানWillUnmount
useEffect(() => {
window.addEventListener('unhandledRejection', handler);
return () => {
window.removeEventListener('unhandledRejection', handler);
}
}, [])
useEffectনির্দিষ্ট ইভেন্টগুলিতে শর্তাধীন করার জন্য , আপনি এটির পরিবর্তনের জন্য চেক করতে মানগুলির একটি অ্যারে সরবরাহ করতে পারেন:
উদাহরণস্বরূপ: উপাদানডিডআপডেট
componentDidUpdate(prevProps, prevState) {
const { counter } = this.props;
if (this.props.counter !== prevState.counter) {
// some action here
}
}
হুকস সমান
useEffect(() => {
// action here
}, [props.counter]); // checks for changes in the values in this array
আপনি যদি এই অ্যারেটি অন্তর্ভুক্ত করেন তবে সময়ের সাথে পরিবর্তিত উপাদান উপাদানগুলি থেকে সমস্ত মানগুলি অন্তর্ভুক্ত করতে ভুলবেন না (প্রপস, রাজ্য), অথবা আপনি পূর্ববর্তী রেন্ডারগুলি থেকে রেফারেন্সিং মানগুলি শেষ করতে পারেন।
ব্যবহারের কিছু সূক্ষ্মতা রয়েছে useEffect; API টি দেখুন Here।
V16.7.0 এর আগে
ফাংশন উপাদানগুলির সম্পত্তি হ'ল তাদের কাছে রিয়েটস লাইফসাইकल ফাংশন বা thisকীওয়ার্ডটিতে অ্যাক্সেস নেই । আপনি React.Componentযদি লাইফসাইকেল ফাংশনটি ব্যবহার করতে চান তবে আপনাকে ক্লাসটি প্রসারিত করতে হবে।
class Grid extends React.Component {
constructor(props) {
super(props)
}
componentDidMount () {
if(!this.props.fetched) {
this.props.fetchRules();
}
console.log('mount it!');
}
render() {
return(
<Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}>
<Box title="Sku Promotion">
<ActionButtons buttons={actionButtons} />
<SkuRuleGrid
data={skuRules.payload}
fetch={props.fetchSkuRules}
/>
</Box>
</Content>
)
}
}
আপনি যখন অতিরিক্ত যুক্তির প্রয়োজন ছাড়াই আপনার উপাদানটি রেন্ডার করতে চান তখন ফাংশন উপাদানগুলি কার্যকর হয়।