উত্তর:
প্রতিক্রিয়াটির প্রধান কাজটি কী কী উপাদানগুলি পর্দায় রেন্ডার করতে চায় তা মেলে ডিওএমকে কীভাবে পরিবর্তন করতে হয় তা নির্ধারণ করা।
প্রতিক্রিয়াটি "মাউন্টিং" (ডিওমে নোড যুক্ত করে), "আনমাউন্টিং" (তাদের ডিওএম থেকে অপসারণ), এবং "আপডেট" (ডিওমে ইতিমধ্যে নোডগুলিতে পরিবর্তন করে) এর মাধ্যমে প্রতিক্রিয়া জানায়।
কীভাবে একটি রিঅ্যাক্ট নোডকে একটি ডিওএম নোড হিসাবে উপস্থাপন করা হয় এবং এটি কখন এবং কখন ডম গাছে প্রদর্শিত হয় শীর্ষ স্তরের এপিআই দ্বারা পরিচালিত হয় । কী চলছে সে সম্পর্কে আরও ভাল ধারণা পেতে, সর্বাধিক সহজ উদাহরণটি দেখুন:
// JSX version: let foo = <FooComponent />;
let foo = React.createElement(FooComponent);সুতরাং কি fooএবং আপনি এটি দিয়ে কি করতে পারেন? fooএই মুহুর্তে এটি একটি সরল জাভাস্ক্রিপ্ট অবজেক্ট যা মোটামুটি এর মতো দেখায় (সরলীকৃত):
{
type: FooComponent,
props: {}
}এটি বর্তমানে পৃষ্ঠায় কোথাও নেই, অর্থাত্ এটি কোনও ডোম উপাদান নয়, ডোম গাছের কোথাও বিদ্যমান নেই এবং অ্যাক্টিমেন্ট নোডের প্রতিক্রিয়া বাদে নথিতে অন্য কোনও অর্থবহ উপস্থাপনা নেই। এটি কেবল প্রতিক্রিয়া জানায় যদি এই প্রতিক্রিয়া উপাদানটি রেন্ডার হয়ে যায় তবে পর্দায় কী হওয়া দরকার । এটি এখনও "মাউন্ট" করা হয়নি।
আপনি প্রতিক্রিয়াটিকে ডওম ধারকটিতে "মাউন্ট" করতে কল করে বলতে পারেন:
ReactDOM.render(foo, domContainer);এটি fooপৃষ্ঠাতে দেখানোর সময় এসেছে প্রতিক্রিয়া জানায় । প্রতিক্রিয়া FooComponentশ্রেণীর একটি উদাহরণ তৈরি করবে এবং এর renderপদ্ধতিটি কল করবে । ধরা যাক এটি একটি রেন্ডার করে, সেক্ষেত্রে <div />প্রতিক্রিয়া তার জন্য একটি divডোম নোড তৈরি করবে এবং এটি ডিওএম পাত্রে প্রবেশ করিয়ে দেবে।
প্রতিক্রিয়া উপাদানগুলির সাথে সম্পর্কিত দৃষ্টান্ত এবং DOM নোডগুলি তৈরি করার এবং সেগুলি ডিওমে OMোকানোর এই প্রক্রিয়াটিকে মাউন্টিং বলা হয়।
নোট করুন যে সাধারণত আপনি কেবল ReactDOM.render()রুট উপাদান (গুলি) মাউন্ট করার জন্য কল করতে পারেন। আপনার সন্তানের উপাদানগুলি ম্যানুয়ালি "মাউন্ট" করার দরকার নেই। প্রতিবার যখন কোনও পিতামাতার উপাদান কল করে setState()এবং এর renderপদ্ধতিটি বলে যে কোনও নির্দিষ্ট শিশুকে প্রথমবারের মতো উপস্থাপন করা উচিত, প্রতিক্রিয়াটি স্বয়ংক্রিয়ভাবে এই শিশুটিকে তার পিতামাতার মধ্যে "মাউন্ট" করবে।
findDOMNodeপ্রতিক্রিয়া উপাদানগুলিতে চালাতে পারবেন না )।
প্রতিক্রিয়া একটি isomorphic / সর্বজনীন কাঠামো। তার মানে হল যে ইউআই উপাদান গাছের ভার্চুয়াল উপস্থাপনা রয়েছে এবং এটি ব্রাউজারে আউটপুট দেয় এমন প্রকৃত রেন্ডারিং থেকে পৃথক। ডকুমেন্টেশন থেকে:
প্রতিক্রিয়া এত তাড়াতাড়ি কারণ এটি কখনই সরাসরি ডওমের সাথে কথা বলে না। প্রতিক্রিয়া DOM এর একটি দ্রুত ইন-মেমরি উপস্থাপনা বজায় রাখে।
যাইহোক, সেই মেমরির প্রতিনিধিত্ব ব্রাউজারে সরাসরি ডিওএমের সাথে আবদ্ধ হয় না (যদিও এটি ভার্চুয়াল ডোম নামে পরিচিত, এটি একটি সার্বজনীন অ্যাপ্লিকেশন কাঠামোর জন্য দুর্ভাগ্যজনক এবং বিভ্রান্তিমূলক নাম ) এবং এটি কেবল একটি ডোমের মতো ডেটা- কাঠামো যা সমস্ত ইউআই উপাদানগুলির শ্রেণিবিন্যাস এবং অতিরিক্ত মেটা-ডেটা উপস্থাপন করে। ভার্চুয়াল ডোম কেবল একটি বাস্তবায়ন বিশদ।
"আমরা মনে করি যে প্রতিক্রিয়াটির আসল ভিত্তিগুলি হ'ল উপাদান এবং উপাদানগুলির ধারণা: আপনি কী একটি ঘোষণামূলক উপায়ে রেন্ডার করতে চান তা বর্ণনা করতে সক্ষম These এই বিভিন্ন প্যাকেজগুলির দ্বারা ভাগ করা অংশগুলি। নির্দিষ্ট রেন্ডারিংয়ের সাথে নির্দিষ্ট প্রতিক্রিয়াগুলির অংশগুলি লক্ষ্যগুলি সাধারণত যখন আমরা প্রতিক্রিয়াটির কথা চিন্তা করি তখন সেভাবে হয় না "" - জেএস ব্লগ প্রতিক্রিয়া
সুতরাং, উপসংহারটি হল যে প্রতিক্রিয়া রেন্ডারিং অগ্নোস্টিক , যার অর্থ এটি চূড়ান্ত আউটপুট কী তা নিয়ে চিন্তা করে না। এটি ব্রাউজারে একটি ডোম ট্রি হতে পারে, এটি এক্সএমএল, নেটিভ উপাদান বা জেএসএন হতে পারে।
"আমরা যেমন রিএ্যাক্ট নেটিভ, রিঅ্যাক্ট আর্ট, রিঅ্যাক্ট-ক্যানভাস এবং রিঅ্যাক্ট-থ্রি প্যাকেজগুলির দিকে নজর দিই তা স্পষ্ট হয়ে গেছে যে রিএ্যাক্টের সৌন্দর্য এবং সারাংশের ব্রাউজারগুলি বা ডোমের সাথে কোনও সম্পর্ক নেই।" - জেএস ব্লগ প্রতিক্রিয়া
এখন, আপনি কীভাবে প্রতিক্রিয়া কাজ করে তা জানেন, আপনার প্রশ্নের উত্তর দেওয়া সহজ :)
মাউন্টিং হ'ল একটি উপাদানটির ভার্চুয়াল উপস্থাপনাটিকে চূড়ান্ত UI উপস্থাপনায় (যেমন DOM বা নেটিভ উপাদানসমূহ) আউটপুট করার প্রক্রিয়া।
একটি ব্রাউজারে যার অর্থ ডিওম গাছের একটি আসল ডিওএম উপাদান (যেমন একটি এইচটিএমএল ডিভি বা লি উপাদান) হিসাবে একটি প্রতিক্রিয়া এলিমেন্ট আউটপুট করা । একটি নেটিভ অ্যাপ্লিকেশনে যার অর্থ একটি বিক্রিয় উপাদানটিকে একটি দেশীয় উপাদান হিসাবে আউটপুট করা। আপনার নিজের সাহস থাকলে আপনার নিজের রেন্ডারার এবং আউটপুট রিট্যাক্ট উপাদানগুলি JSON বা XML বা এমনকি XAML এ লিখতে পারেন।
সুতরাং, মাউন্টিং / আনমাউন্টিং হ্যান্ডলারগুলি একটি প্রতিক্রিয়া অ্যাপ্লিকেশনটির জন্য গুরুত্বপূর্ণ, কারণ আপনি কেবল নিশ্চিত হতে পারেন যে কোনও উপাদান যখন আউটপুট / রেন্ডার করা হয় তখন এটি মাউন্ট করা হয় । তবে, componentDidMountহ্যান্ডলারটি কেবলমাত্র প্রকৃত ইউআই উপস্থাপনার (ডিওএম বা নেটিভ উপাদান) রেন্ডার করার সময় অনুরোধ করা হয় তবে আপনি যদি সার্ভারের কোনও এইচটিএমএল স্ট্রিং ব্যবহার করে renderToStringতা বোঝাতে না পারেন, এটি বোঝা যায়, যেহেতু উপাদানটি পৌঁছানো অবধি প্রকৃতপক্ষে মাউন্ট হয় না ব্রাউজার এবং এটি চালায়।
এবং, হ্যাঁ, মাউন্টিংও একটি দুর্ভাগ্যজনক / বিভ্রান্তিকর নাম, যদি আপনি আমাকে জিজ্ঞাসা করেন। আইএমএইচও componentDidRenderএবং componentWillRenderআরও ভাল নাম হবে।
componentDidRenderবিকল্প হয় componentDidMountকারণ প্রপস একবারে মাউন্ট করার পরে যখন উপাদানগুলি একাধিকবার রেন্ডার করতে পারে।
(id === that.id) ? <Component /> : null| /app/items/:id| this.setState(...)।
/react-js-the-king-of-universal-apps/( Edit-মন্তব্য পরিষ্কারভাবে উল্লেখ এটি একটি ভাঙা লিঙ্ক দিয়ে ), কিন্তু সহকর্মীদের সম্পাদন করা উভয় বার প্রত্যাখ্যান করেছে । কেউ আমাকে উত্তর সম্পাদনা করতে এবং ভাঙা লিঙ্কটি সরিয়ে দেওয়ার ক্ষেত্রে কী ভুল তা গাইড করতে পারে?
মাউন্টিংটি ডকুমেন্টের কিছু অংশের সাথে সংযুক্ত হওয়া প্রতিক্রিয়াযুক্ত (তৈরি করা ডোম নোডগুলি) উপাদানকে বোঝায়। এটাই!
প্রতিক্রিয়া উপেক্ষা করে আপনি এই দুটি নেটিভ ফাংশনকে মাউন্ট হিসাবে ভাবতে পারেন:
অভ্যন্তরীণভাবে মাউন্ট করতে ব্যবহৃত প্রতিক্রিয়াগুলি সর্বাধিক সাধারণ ফাংশন।
ভাবা:
উপাদানউইলমাউন্ট === মাউন্ট করার আগে
এবং:
উপাদানডিডমাউন্ট === মাউন্ট পরে
appendChild, কী render?
renderযে আসল পদ্ধতি যা মাউন্ট নিজেই করবে। সুতরাং componentWillMount== এর আগে, render== ডোম সন্নিবেশ করায়, এবং componentDidMount== মাউন্ট পরে (বা renderউপাদান সন্নিবেশ করার জন্য একটি ডম এপিআই বলেছে এবং যে অ্যাসিঙ্ক্রোনাস অপারেশন সম্পূর্ণভাবে সম্পন্ন হয়েছে)
https://facebook.github.io/react/docs/tutorial.html
এখানে, কম্পোনেন্টডিডমাউন্ট এমন একটি পদ্ধতি যা স্বয়ংক্রিয়ভাবে প্রতিক্রিয়া দ্বারা কল করা হয় যখন কোনও উপাদান রেন্ডার করা হয়।
ধারণাটি হ'ল আপনি রিএ্যাকটিজেএসকে বলছেন, "দয়া করে এই জিনিসটি নিন, এই মন্তব্য বাক্সটি বা স্পিনিং ইমেজটি বা ব্রাউজারের পৃষ্ঠায় আমার যা যা চাই তা সামনে নিয়ে যান এবং আসলে ব্রাউজার পৃষ্ঠায় রেখে দিন that's এটি হয়ে গেলে, কল করুন আমার ফাংশন যা আমি আবদ্ধ componentDidMountহয়েছি তাই আমি এগিয়ে যেতে পারি ""
componentWillMountবিপরীত হয়। আপনার উপাদানগুলির রেন্ডারগুলির আগে এটি তাত্ক্ষণিকভাবে গুলি চালানো হবে।
এছাড়াও এখানে দেখুন https://facebook.github.io/react/docs/comp घटक-specs.html
অবশেষে, "মাউন্ট" শব্দটি প্রতিক্রিয়াটির জন্য অনন্য বলে মনে হচ্ছে j আমি এটি সাধারণ জাভাস্ক্রিপ্ট ধারণা বা এমনকি একটি সাধারণ ব্রাউজার ধারণা বলে মনে করি না।
componentDidUpdateপরিবর্তে বলা হয়।
আপনার প্রতিক্রিয়া উপাদানটি যখন প্রথম রেন্ডার করা হয় তখন মাউন্ট করা প্রাথমিক পৃষ্ঠা লোডিংকে বোঝায়। মাউন্টিংয়ের জন্য প্রতিক্রিয়া ডকুমেন্টেশন থেকে: উপাদানডিডমাউন্ট:
Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).
আপনি এটি উপাদানবিহীন ফাংশনটির সাথে বিপরীত করতে পারেন, যাকে প্রতিবার প্রতিক্রিয়া জানানো হয় (প্রাথমিক মাউন্ট ব্যতীত) nd
React js এর মূল লক্ষ্য হ'ল পুনরায় ব্যবহারযোগ্য উপাদান তৈরি করা। এখানে উপাদানগুলি একটি ওয়েবপৃষ্ঠার স্বতন্ত্র অংশ। উদাহরণস্বরূপ, ওয়েবপৃষ্ঠায় শিরোলেখ একটি উপাদান, ফুটার একটি উপাদান, টোস্ট বিজ্ঞপ্তি একটি উপাদান এবং ইত্যাদি etc. "মাউন্ট" শব্দটি আমাদের জানায় যে এই উপাদানগুলি ডিওমে লোড হয় বা রেন্ডার হয়। এগুলি হ'ল অনেক শীর্ষ স্তরের এপিআই এবং এর সাথে সম্পর্কিত পদ্ধতিগুলি।
এটিকে সহজ করে তোলার জন্য, মাউন্ট করা মানে ডিওএমটিতে উপাদানটি লোড করা হয়েছে এবং আনমাউন্ট করা মানে ডিওএম থেকে উপাদানগুলি সরানো হয়েছে।
React.createElement(FooComponent)কোনও উদাহরণ তৈরি করছেন নাFooComponent।fooএকটি ভার্চুয়াল ডিওএম প্রতিনিধিত্ব যাFooComponentপ্রতিক্রিয়া উপাদান হিসাবে পরিচিত। তবে সম্ভবতFooComponentএটিই আপনি প্রতিক্রিয়া টাইপ দ্বারা বোঝাতে চেয়েছিলেন । তথাপি, আপনি প্রতিক্রিয়া উপাদান মাউন্ট করবেন না, আপনি রেন্ডার যা আবার কল পারে উপাদান মাউন্ট প্রকৃত DOM নোড চাহিদা DOM গাছ উপাদান প্রতিনিধিত্ব করতে তৈরি করা হবে। আসল মাউন্টিং এমন ইভেন্ট যা প্রথমবারের মতো ঘটে।