আমি এই ধারণাগুলি সম্পর্কে কিছুটা অস্পষ্ট, আমি যদি একইভাবে টুডো অ্যাপ্লিকেশনটি সম্পূর্ণভাবে AngularJS এবং ReactJS এ তৈরি করি --- তবে কী প্রতিক্রিয়া টুডো AngularJS এর দ্বিমুখী ডেটা বাইন্ডিং বনাম একমুখী ডেটা বাঁধাই ব্যবহার করে?
আমি বুঝতে পারি যে প্রতিক্রিয়ার কাজগুলি এর মতো
রেন্ডার (ডেটা) ---> ইউআই।
এটি কৌণিক থেকে পৃথক কীভাবে?
উত্তর:
যখন কৌণিক দুটি সেট "ডেটাব্যান্ডিং" উপস্থিত থাকে (এটি একটি সরলীকরণ)
//js
$scope.name = 'test';
$timeout(function() { $scope.name = 'another' }, 1000);
$timeout(function() { console.log($scope.name); }, 5000);
<!-- html --->
<input ng-model="name" />ইনপুটটি শুরু হবে test, তারপরে another1000 মিমিতে আপডেট হবে । কোন পরিবর্তন $scope.nameহয় নিয়ামক কোড থেকে বা ইনপুট পরিবর্তন করে, কনসোল লগ 4000ms পরে দেখা যাবে। এর পরিবর্তনগুলি সম্পত্তিতে স্বয়ংক্রিয়ভাবে <input />প্রতিফলিত $scope.nameহয়, যেহেতু ng-modelসেট আপগুলি ইনপুট দেখায় $scopeএবং পরিবর্তনের বিষয়ে অবহিত করে। কোড থেকে পরিবর্তন এবং এইচটিএমএল থেকে আসা পরিবর্তনগুলি দ্বি-মুখী বন্ধন । ( এই ঝাঁকুনিটি দেখুন )
প্রতিক্রিয়াটির উপাদানটিকে পরিবর্তন করার জন্য এইচটিএমএলকে অনুমতি দেওয়ার কোনও ব্যবস্থা নেই। এইচটিএমএল কেবল সেই ইভেন্টগুলিকে উত্থাপন করতে পারে যা উপাদানগুলি সাড়া দেয়। সাধারণ উদাহরণ ব্যবহার করে হয় onChange।
//js
render() {
return <input value={this.state.value} onChange={this.handleChange} />
}
handleChange(e) {
this.setState({value: e.target.value});
}এর মানটি ফাংশন দ্বারা পুরোপুরি<input /> নিয়ন্ত্রিত হয়render । এই মানটি আপডেট করার একমাত্র উপায় হ'ল উপাদানটি থেকেই, যা কোনও onChangeইভেন্ট সংযুক্ত করে সম্পন্ন হয় <input />যা this.state.valueপ্রতিক্রিয়া উপাদানটির পদ্ধতিতে সেট করে setState। <input />উপাদান রাষ্ট্র থেকে সরাসরি প্রবেশাধিকার নেই, এবং তাই এটি পরিবর্তন করতে পারবেন না। এটি একমুখী বাঁধাই । (এই কোডেপেনটি দেখুন )
onChange শ্রোতাদের ম্যানুয়ালি সেট আপ করতে হবে এবং চালনা করতে হবে handleChange। কিন্তু কারণ প্রতিক্রিয়া এক পথ ডেটার সেখান থেকে বাঁধাই, ডাটা → UI 'তে আপডেট করে স্বয়ংক্রিয়ভাবে।
আমি একটু অঙ্কন করলাম। আমি এটি যথেষ্ট পরিষ্কার আশা করি। যদি তা না হয় আমাকে জানাবেন!
দ্বি-মুখী ডেটা বাইন্ডিং মডেলের মান স্বয়ংক্রিয়ভাবে আপডেট করার জন্য একটি ইনপুট থাকার সময় কোনও সম্পত্তির মূল্য নিতে এবং দৃশ্যে এটি প্রদর্শন করার ক্ষমতা সরবরাহ করে। উদাহরণস্বরূপ, আপনি ভিউতে সম্পত্তি "টাস্ক" প্রদর্শন করতে পারেন এবং একই সম্পত্তিটিতে পাঠ্যবাক্সের মানটি বাঁধতে পারেন। সুতরাং, ব্যবহারকারী যদি পাঠ্যবক্সের মান আপডেট করে তবে ভিউ স্বয়ংক্রিয়ভাবে আপডেট হবে এবং নিয়ামকটিতে এই পরামিতির মানও আপডেট করা হবে। বিপরীতে, একটি উপায় বাঁধাই কেবলমাত্র মডেলের মানটিকে দৃশ্যের সাথে বেঁধে রাখে এবং ব্যবহারকারীর দ্বারা দর্শনের মান পরিবর্তন করা হয়েছে কিনা তা নির্ধারণ করার জন্য অতিরিক্ত পর্যবেক্ষক নেই।
রিঅ্যাক্ট.জেএস সম্পর্কিত, এটি আসলে দ্বি-উপাত্তের জন্য বাইন্ডিং বাঁধার জন্য ডিজাইন করা হয়নি, তবে আপনি কিছু অতিরিক্ত যুক্তি যুক্ত করে নিজেই দ্বি-মুখী বাইন্ডিং প্রয়োগ করতে পারেন, উদাহরণস্বরূপ এটি দেখুন লিঙ্কটি দেখুন । অ্যাঙ্গুলার.জেএস-এ দ্বিমুখী বাইন্ডিং প্রথম শ্রেণির নাগরিক, সুতরাং এই অতিরিক্ত যুক্তি যুক্ত করার দরকার নেই।