প্রতিক্রিয়াটির সরকারী দস্তাবেজে এটি উল্লেখ করা হয়েছে -
আপনি যদি প্রতিক্রিয়া শ্রেণীর জীবনচক্র পদ্ধতিগুলির সাথে পরিচিত হন তবে আপনি ব্যবহারের প্রভাবকে হুকটিকে উপাদান উপাদান ডেডমাউন্ট, উপাদান ডিডআপডেট এবং উপাদানবিচ্ছিন্নউমাউন্ট সমন্বিত হিসাবে ভাবতে পারেন।
আমার প্রশ্নটি - আমরা কীভাবে componentWillMount()একটি হুকের মধ্যে লাইফাইল পদ্ধতি ব্যবহার করতে পারি ?
উত্তর:
আপনি বিদ্যমান জীবনচক্র পদ্ধতি (কোন ব্যবহার করতে পারবেন না componentDidMount, componentDidUpdate, componentWillUnmountএকটি হুক মধ্যে ইত্যাদি)। এগুলি কেবল শ্রেণি উপাদানগুলিতে ব্যবহার করা যেতে পারে। এবং হুক্সের সাহায্যে আপনি কেবল কার্যকরী উপাদানগুলিতে ব্যবহার করতে পারেন। প্রতিক্রিয়া ডক থেকে নীচের লাইনটি এসেছে:
তুমি ক্লাসে জীবনচক্র পদ্ধতি প্রতিক্রিয়া সাথে পরিচিত হন, আপনি মনে করতে পারেন
useEffectহুক যেমনcomponentDidMount,componentDidUpdateএবংcomponentWillUnmountমিলিত।
পরামর্শটি হ'ল, আপনি কোনও কার্যক্ষম উপাদানগুলিতে শ্রেণিবদ্ধ উপাদানগুলি থেকে এই লাইফাইকাইকেল পদ্ধতিটি নকল করতে পারেন।
componentDidMountউপাদানটি মাউন্ট করা হলে একবারের ভিতরে কোড চালান। useEffectএই আচরণের জন্য হুক সমতুল্য
useEffect(() => {
// Your code here
}, []);দ্বিতীয় প্যারামিটারটি এখানে লক্ষ্য করুন (খালি অ্যারে) এটি একবারই চলবে।
দ্বিতীয় প্যারামিটারটি ছাড়াuseEffect হুক বলা হবে যে উপাদান বিপজ্জনক হতে পারে এর রেন্ডার।
useEffect(() => {
// Your code here
});componentWillUnmountপরিষ্কার করার জন্য ব্যবহার করা হয় (যেমন ইভেন্ট শ্রোতাদের সরানো, টাইমার বাতিল করা ইত্যাদি)। বলুন আপনি কোনও ইভেন্ট শ্রোতাকে এতে যোগ করছেন componentDidMountএবং এটি componentWillUnmountনীচের মত সরিয়ে দিচ্ছেন ।
componentDidMount() {
window.addEventListener('mousemove', () => {})
}
componentWillUnmount() {
window.removeEventListener('mousemove', () => {})
}উপরের কোডের সমতুল্য হুক নিম্নরূপ হবে
useEffect(() => {
window.addEventListener('mousemove', () => {});
// returned function will be called on component unmount
return () => {
window.removeEventListener('mousemove', () => {})
}
}, [])useEffect()ফাংশন বুঝতে পারি , ধন্যবাদ।
componentWillMount
componentWillMount, না componentWillUnmount। এই উত্তরটি আসলে প্রশ্নের কোনও উত্তর দেয় না, এবং ওপি ইতিমধ্যে যা জানাতে ইঙ্গিত করেছিল তা পুনরাবৃত্তি করে।
বেশিরভাগ ক্ষেত্রেই useComponentDidMountব্যবহার করার সরঞ্জাম। উপাদানটি মাউন্ট হওয়ার পরে এটি একবারে চলবে (প্রাথমিক রেন্ডার)।
const useComponentDidMount = func => useEffect(func, []);এটি লক্ষ করা গুরুত্বপূর্ণ যে শ্রেণীর উপাদানগুলিতে componentWillMountউত্তরাধিকার হিসাবে বিবেচিত হয়। উপাদানটি মাউন্ট হওয়ার আগে যদি আপনার একবার কোড চালানোর প্রয়োজন হয় তবে আপনি কনস্ট্রাক্টরটি ব্যবহার করতে পারেন। এটি সম্পর্কে এখানে আরও । যেহেতু কার্যকরী উপাদানটির কোনও কনস্ট্রাক্টরের সমতুল্য উপাদান নেই, তাই উপাদানগুলির মাউন্টগুলি নির্দিষ্ট ক্ষেত্রে বোঝার আগে কেবল একবার কোড চালানোর জন্য একটি হুক ব্যবহার করে। আপনি এটি একটি কাস্টম হুক দিয়ে অর্জন করতে পারেন।
const useComponentWillMount = func => {
const willMount = useRef(true);
if (willMount.current) {
func();
}
willMount.current = false;
};তবে, একটি অসুবিধা আছে। এটিকে অবিচ্ছিন্নভাবে আপনার রাজ্য সেট করতে ব্যবহার করবেন না (প্রাক্তন সার্ভারের অনুরোধ অনুসরণ করে As যেমনটি আপনি আশা করতে পারেন যে এটি প্রাথমিক রেন্ডারিংকে প্রভাবিত করবে যা এটি হবে না)। এ জাতীয় মামলাগুলি পরিচালনা করা উচিত useComponentDidMount।
const Component = (props) => {
useComponentWillMount(() => console.log("Runs only once before component mounts"));
useComponentDidMount(() => console.log("Runs only once after component mounts"));
...
return (
<div>{...}</div>
);
}componentWillMountভিত্তিক এই কার্যকরী বাস্তবায়নে useEffectদুটি সমস্যা রয়েছে has প্রথমটি হ'ল কার্যকরী উপাদানগুলিতে একটি মাউন্ট লাইফসাইকেল নেই, উভয় হুক উপাদানটি রেন্ডার করার পরে চলবে, তাই Runs only once before component mountsবিভ্রান্তিকর। দ্বিতীয়টি হ'ল componentWillMountসার্ভার রেন্ডারিংয়ে ডাকা হয় এবং useEffectহয় না। অনেক লাইব্রেরি এখনও নির্ভর করে UNSAFE_componentWillMountকারণ বর্তমানে এটি সাইড-ইফেক্ট সার্ভার-সাইডটি ট্রিগার করার একমাত্র উপায়।
Reactjs.org এর মতে, কম্পোনেন্ট উইলমাউন্ট ভবিষ্যতে সমর্থিত হবে না। https://reactjs.org/docs/react-component.html#unsafe_componentwillmount
কম্পোনেন্টওয়েলমাউন্ট ব্যবহার করার দরকার নেই।
আপনি যদি উপাদানটি মাউন্ট করার আগে কিছু করতে চান তবে কেবল এটি কনস্ট্রাক্টর () এ করুন।
আপনি যদি নেটওয়ার্কের অনুরোধগুলি করতে চান তবে এটি কম্পোনেন্টওয়েলমাউন্টে করবেন না। কারণ এটি করার ফলে অপ্রত্যাশিত বাগগুলি দেখা দেবে।
নেটওয়ার্ক অনুরোধগুলি কম্পোনেন্টডিডমাউন্টে করা যেতে পারে।
আশা করি এটা সাহায্য করবে.
08/03/2019 এ আপডেট হয়েছে
আপনি যে উপাদানটি উইলমাউন্টের জন্য জিজ্ঞাসা করেছেন তার কারণ সম্ভবত আপনি রেন্ডারগুলির আগে রাজ্যকে আরম্ভ করতে চান।
এটি কেবল স্টেটে করুন।
const helloWorld=()=>{
const [value,setValue]=useState(0) //initialize your state here
return <p>{value}</p>
}
export default helloWorld;অথবা হতে পারে আপনি কম্পোনেন্টউলমাউন্টে কোনও ফাংশন পরিচালনা করতে চান, উদাহরণস্বরূপ, যদি আপনার মূল কোডটি দেখতে এই রকম হয়:
componentWillMount(){
console.log('componentWillMount')
}হুক দিয়ে, আপনাকে যা করতে হবে তা হ'ল লাইফেসাইক্যাল পদ্ধতিটি সরানো:
const hookComponent=()=>{
console.log('componentWillMount')
return <p>you have transfered componeWillMount from class component into hook </p>
}আমি শুধু ব্যবহারের প্রভাব সম্পর্কে প্রথম উত্তরে কিছু যুক্ত করতে চাই।
useEffect(()=>{})ইউজএফেক্ট প্রতিটি রেন্ডারে চালিত হয়, এটি কম্পোনেন্টডিডপেটেট, কম্পোনেন্টডিডমাউন্ট এবং কম্পোনেন্টওয়িলআউনমাউন্টের সংমিশ্রণ।
useEffect(()=>{},[])আমরা যদি ব্যবহারের ক্ষেত্রে খালি অ্যারে যুক্ত করি তবে এটি উপাদানটি মাউন্ট করার সময় চলে runs এটি হ'ল ইউজএফেক্ট আপনি যে অ্যারেটি দিয়েছিলেন তার সাথে তুলনা করবে। সুতরাং এটি খালি অ্যারে হতে হবে না t এটি অ্যারে হতে পারে যা পরিবর্তন হচ্ছে না। উদাহরণস্বরূপ, এটি [1,2,3] বা ['1,2'] হতে পারে। ইউজএফেক্টটি তখনও চালিত হয় যখন উপাদানটি মাউন্ট হয়।
এটি আপনি একবার চালাতে চান বা প্রতি রেন্ডারের পরে চালানো চান তা আপনার উপর নির্ভর করে। আপনি যতক্ষণ না জানেন আপনি যতক্ষণ না কোনও অ্যারে যুক্ত করতে ভুলে গেছেন তা বিপজ্জনক নয়।
আমি হুক জন্য একটি নমুনা তৈরি। অনুগ্রহপূর্বক এটি ভালো করে দেখুন.
https://codesandbox.io/s/kw6xj153wr
21/08/2019 এ আপডেট হয়েছে
আমি উপরের উত্তরটি লেখার পরে এটি একটি সাদা হয়েছে। এমন কিছু আছে যা আমি মনে করি আপনার মনোযোগ দেওয়া উচিত। আপনি যখন ব্যবহার
useEffect(()=>{},[])প্রতিক্রিয়া যখন অ্যারের সাথে আপনি পাস করা মানগুলির সাথে তুলনা করে [], এটি তুলনা করতে অবজেক্ট.ইস () ব্যবহার করে। আপনি যদি এটিতে কোনও বস্তু পাস করেন, যেমন
useEffect(()=>{},[{name:'Tom'}])এটি হুবহু একই:
useEffect(()=>{})এটি প্রতিবার পুনরায় রেন্ডার করবে কারণ যখন অবজেক্ট.ইস () কোনও বস্তুর তুলনা করে, তখন এটি তার রেফারেন্সটির সাথে মানটির তুলনা করে। এটি একই কারণ কেন {} === {false মিথ্যা ফিরিয়ে দেয় কারণ তাদের উল্লেখগুলি ভিন্ন। আপনি যদি এখনও অবজেক্টটিকে রেফারেন্সের মতো না করে তুলনা করতে চান তবে আপনি এই জাতীয় কিছু করতে পারেন:
useEffect(()=>{},[JSON.stringify({name:'Tom'})])useLayoutEffectএটি খালি পর্যবেক্ষকদের একটি সেট দিয়ে সম্পন্ন করতে পারে ( []) যদি কার্যকারিতাটি আসলে অনুরূপ হয় componentWillMount- এটি প্রথম কন্টেন্টটি ডম-এ যাওয়ার আগে চলবে - যদিও সেখানে দুটি আপডেট রয়েছে তবে স্ক্রিনে আঁকানোর আগে সেগুলি সিঙ্ক্রোনাস।
উদাহরণ স্বরূপ:
function MyComponent({ ...andItsProps }) {
useLayoutEffect(()=> {
console.log('I am about to render!');
},[]);
return (<div>some content</div>);
}
উপকার শেষ useStateএকটি ইনিশিয়ালাইজার / সেটার দিয়েuseEffect হ'ল বা এটি কোনও রেন্ডার পাস গণনা করতে পারে তবে DOM- এর কোনও প্রকৃত পুনঃ-রেন্ডার নেই যা কোনও ব্যবহারকারী লক্ষ্য করবে এবং এটি প্রথম লক্ষণীয় রেন্ডারের আগে চালিত হয় , যা এটির জন্য নয় for useEffect। ডাউনসাইডটি অবশ্যই আপনার প্রথম রেন্ডারে কিছুটা বিলম্ব হয় যেহেতু স্ক্রিনে পেইন্টিংয়ের আগে একটি চেক / আপডেট হওয়া উচিত। যদিও এটি আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে।
আমি ব্যক্তিগতভাবে মনে করি, useMemo এমন কিছু কুলুঙ্গির ক্ষেত্রে ঠিক আছে যেখানে আপনার ভারী কিছু করা দরকার - যতক্ষণ আপনি মনে রাখবেন এটি নিয়ম বনাম ব্যতিক্রম।
আমি একটি কাস্টম হুক লিখেছি যা প্রথম রেন্ডার করার আগে একবার একটি ফাংশন চালাবে।
useBeforeFirstRender.js
import { useState, useEffect } from 'react'
export default (fun) => {
const [hasRendered, setHasRendered] = useState(false)
useEffect(() => setHasRendered(true), [hasRendered])
if (!hasRendered) {
fun()
}
}ব্যবহার:
import React, { useEffect } from 'react'
import useBeforeFirstRender from '../hooks/useBeforeFirstRender'
export default () => {
useBeforeFirstRender(() => {
console.log('Do stuff here')
})
return (
<div>
My component
</div>
)
}এইভাবে আমি useRefহুক ব্যবহার করে ক্রিয়ামূলক উপাদানগুলিতে কনস্ট্রাক্টরকে অনুকরণ করি :
function Component(props) {
const willMount = useRef(true);
if (willMount.current) {
console.log('This runs only once before rendering the component.');
willMount.current = false;
}
return (<h1>Meow world!</h1>);
}জীবনচক্র উদাহরণ এখানে:
function RenderLog(props) {
console.log('Render log: ' + props.children);
return (<>{props.children}</>);
}
function Component(props) {
console.log('Body');
const [count, setCount] = useState(0);
const willMount = useRef(true);
if (willMount.current) {
console.log('First time load (it runs only once)');
setCount(2);
willMount.current = false;
} else {
console.log('Repeated load');
}
useEffect(() => {
console.log('Component did mount (it runs only once)');
return () => console.log('Component will unmount');
}, []);
useEffect(() => {
console.log('Component did update');
});
useEffect(() => {
console.log('Component will receive props');
}, [count]);
return (
<>
<h1>{count}</h1>
<RenderLog>{count}</RenderLog>
</>
);
}[Log] Body
[Log] First time load (it runs only once)
[Log] Body
[Log] Repeated load
[Log] Render log: 2
[Log] Component did mount (it runs only once)
[Log] Component did update
[Log] Component will receive propsঅবশ্যই শ্রেণীর উপাদানগুলির Bodyপদক্ষেপ নেই, ফাংশন এবং ক্লাসের বিভিন্ন ধারণার কারণে 1: 1 সিমুলেশন করা সম্ভব নয়।
বাস্তবায়নের জন্য componentDidMountএবং এর componentWillUnmountসাথে একটি দুর্দান্ত কাজ রয়েছে useEffect।
ডকুমেন্টেশনের উপর ভিত্তি করে, useEffectএকটি "ক্লিনআপ" ফাংশন ফিরিয়ে দিতে পারে। এই ক্রিয়াকলাপটি useEffectকেবলমাত্র পরবর্তী কলগুলিতে প্রথম কল করা হবে না ।
অতএব, যদি আমরা useEffectকোনও নির্ভরতা ছাড়াই হুক ব্যবহার করি তবে হুকটি কেবল তখনই কল হবে যখন উপাদানটি মাউন্ট করা হবে এবং যখন উপাদানটি আনমাউন্ট করা হবে না তখন "ক্লিনআপ" ফাংশন বলা হবে।
useEffect(() => {
console.log('componentDidMount');
return () => {
console.log('componentWillUnmount');
};
}, []);ক্লিনআপ রিটার্ন ফাংশন কলটি কেবলমাত্র যখন উপাদানটি আনমাউন্ট করা হয় তা কল করা হয়।
আশাকরি এটা সাহায্য করবে.
useEffectকলটিতে আপনি একই কার্যকারিতা পেয়েছেন componentWillMountএবং componentWillUnmountএকটি সুন্দর এবং পরিষ্কার উপায়ে
useEffectকেবলমাত্র রেন্ডার পরে componentWillMountচালানো হয় যখন উপাদানগুলি রেন্ডার করার আগে চলে।
componentDidMountনা componentWillMount। আমি প্রশ্নটি মিস করেছি, আমার খারাপ।
আপনি একটি উপাদানউইনমাউন্ট লাইফসাইकल ইভেন্টটি অনুকরণ করতে মেমো হুকটি হ্যাক করতে পারেন। শুধু কর:
const Component = () => {
useMemo(() => {
// componentWillMount events
},[]);
useEffect(() => {
// componentWillMount events
return () => {
// componentWillUnmount events
}
}, []);
};আপনার রাজ্যের সাথে ইন্টারঅ্যাক্ট করে এমন কোনও কিছুর আগে আপনাকে ইউজমেমো হুক রাখতে হবে। এটি কীভাবে উদ্দেশ্যযুক্ত তা নয় তবে এটি আমার জন্য সমস্ত উপাদানবিশেষমাউন্ট ইস্যুগুলির জন্য কাজ করেছিল।
এটি কাজ করে কারণ UseMemo আসলে কোনও মান ফেরত নিতে পারে না এবং আপনাকে এটিকে আসলে কোনও হিসাবে ব্যবহার করতে হবে না, তবে যেহেতু এটি নির্ভরতার উপর ভিত্তি করে একটি মূল্য মুখস্থ করে যা কেবল একবার ("[]") চলবে এবং এটি আমাদের উপাদানটির শীর্ষে থাকবে এটি উপাদানটি অন্য কোনও কিছুর আগে মাউন্ট করলে একবার চলে।
https://reactjs.org/docs/hooks-reference.html#usememo
মনে রাখবেন যে ফাংশনটি মেমো ব্যবহারের জন্য পাস হয়েছে রেন্ডারিংয়ের সময় চলে runs রেন্ডারিংয়ের সময় আপনি সাধারণত করবেন না এমন কোনও কাজ সেখানে করবেন না। উদাহরণস্বরূপ, পার্শ্ব প্রতিক্রিয়াগুলি UseEffect এর সাথে সম্পর্কিত, মেমো ব্যবহার নয়।
বেন কার্পের উত্তরটি আমার কাছে কেবল বৈধ বলে মনে হচ্ছে।
তবে যেহেতু আমরা কার্যকরী উপায়গুলি ব্যবহার করছি কেবলমাত্র অন্য পদ্ধতির বন্ধ এবং হউক থেকে উপকার পাওয়া যেতে পারে:
const InjectWillmount = function(Node, willMountCallback) {
let isCalled = true;
return function() {
if (isCalled) {
willMountCallback();
isCalled = false;
}
return Node;
};
};তারপরে এটি ব্যবহার করুন:
const YourNewComponent = InjectWillmount(<YourComponent />, () => {
console.log("your pre-mount logic here");
});আপনার মূল প্রশ্নের সংক্ষিপ্ত উত্তর , কীভাবে componentWillMountপ্রতিক্রিয়া হুক ব্যবহার করা যেতে পারে:
componentWillMountহয় অবচিত এবং উত্তরাধিকার বিবেচিত । সুপারিশ প্রতিক্রিয়া :
সাধারণত, আমরা রাষ্ট্র আরম্ভের পরিবর্তে কনস্ট্রাক্টর () ব্যবহার করার পরামর্শ দিই।
এখন হুক এফএকিউতে আপনি জানতে পারেন, ফাংশন উপাদানগুলির জন্য শ্রেণি নির্মাতার সমতুল্য কী:
কনস্ট্রাক্টর: ফাংশন উপাদানগুলির একটি নির্মাণকারীর প্রয়োজন হয় না। আপনি স্টেট কলটি স্টেটে কল করতে পারেন। প্রাথমিক অবস্থার গণনা যদি ব্যয়বহুল হয় তবে আপনি ব্যবহার স্টেটে কোনও ফাংশন পাস করতে পারেন।
সুতরাং componentWillMountদেখতে ব্যবহারের উদাহরণ এটির মতো:
const MyComp = () => {
const [state, setState] = useState(42) // set initial value directly in useState
const [state2, setState2] = useState(createInitVal) // call complex computation
return <div>{state},{state2}</div>
};
const createInitVal = () => { /* ... complex computation or other logic */ return 42; };