ভার্চুয়াল ডিওএম কী?

Question

সম্প্রতি, আমি ফেসবুকের প্রতিক্রিয়া কাঠামোর দিকে তাকিয়েছি । এটি "ভার্চুয়াল ডোম" নামে একটি ধারণা ব্যবহার করে যা আমি সত্যিই বুঝতে পারি নি।

ভার্চুয়াল ডিওএম কী? সুবিধা কি?

Comments

আমি বিশ্বাস করি ভার্চুয়াল ডিওএম নোডগুলি নিয়ে কথা বলছে যা সাধারণ ডিওমে নেই।

— ডেরেক 朕 會

সংযম সম্পর্কে আমি উপরোক্ত অনুভূতির সাথে একমত তদুপরি, আমি বিশ্বাস করি এটি একটি খুব কার্যকর এবং দরকারী প্রশ্ন। "ভার্চুয়াল ডোম" প্রায়শই উল্লেখ করা হয় তবে খুব কম সংজ্ঞায়িত হয়।

— btiernay

শুরু করতে স্কচ ডেস্ক টিউটোরিয়াল না পড়া পর্যন্ত আমি আমার সীমিত ওয়েব অভিজ্ঞতার সাথে এটি বুঝতে পারি না । তারা দুর্দান্ত কাজ করেছে।

— রাচেল

Answer 1

প্রতিক্রিয়া DOM এর একটি অংশকে উপস্থাপন করে এমন কাস্টম অবজেক্টগুলির একটি গাছ তৈরি করে। উদাহরণস্বরূপ, একটি উল উপাদান সমন্বিত একটি আসল ডিআইভি উপাদান তৈরির পরিবর্তে এটি একটি React.div অবজেক্ট তৈরি করে যাতে একটি React.ul অবজেক্ট থাকে। এটি সত্যিকারের ডিওএম স্পর্শ না করে বা ডোম এপিআইয়ের মাধ্যমে না গিয়ে খুব দ্রুত এই বিষয়গুলি পরিচালনা করতে পারে। তারপরে, যখন এটি কোনও উপাদানকে রেন্ডার করে, দুটি বৃক্ষের সাথে মিল রাখতে সত্যিকারের DOM এর সাথে কী করা দরকার তা নির্ধারণ করতে এটি এই ভার্চুয়াল ডোমটি ব্যবহার করে।

আপনি একটি ব্লুপ্রিন্টের মতো ভার্চুয়াল ডিওএম সম্পর্কে ভাবতে পারেন। এটিতে ডিওএম তৈরির জন্য প্রয়োজনীয় সমস্ত বিবরণ রয়েছে তবে এটির জন্য সত্যিকারের ডিওমে যাওয়ার জন্য সমস্ত হেভিওয়েট অংশের প্রয়োজন হয় না, এটি তৈরি করা যায় এবং আরও সহজেই পরিবর্তন করা যায়।

Comments

এটি কেবলমাত্র একটি অংশের পরিবর্তে পুরো ডিওএমের জন্য ব্যবহার করা যেতে পারে?

— হিপকিস

এটি মূলত বিমূর্তনের উপরে বিমূর্ততা যা শেষ পর্যন্ত তার প্রতিক্রিয়াটির জন্য তার বস্তু মডেল গাছের রেফারেন্সের জন্য কী প্রতিক্রিয়া দেখায়, এইচটিএমএল আসল নোডটি নির্বাচন করুন এবং এটির সাথে টিঙ্কার করুন। শব্দটি দুর্দান্ত virtual dom, তবে এটি অভিনব এবং ওভারহাইপ কিছুই নয়।

— syarul

হেভিওয়েট অংশ - "এটির জন্য সত্যিকারের ডোমগুলিতে যাওয়া সমস্ত হেভিওয়েট অংশের প্রয়োজন হয় না" এর অর্থ কী?

— অজয় এস

@ অজয়াস রিয়েল ডিওএম খুব কার্যকরী নয়, এজন্য এটিকে ভারী এপিআই বলা হয়। মেমরিতে অবজেক্টগুলি ম্যানিপুলেট করা অনেক দ্রুত এবং আরও কার্যকর, পরিবর্তিত DOM এর অংশটি আপডেট করা আরও কার্যকর এবং দ্রুত।

— jcubic

Answer 2

আসুন একটি উদাহরণ নেওয়া যাক - যদিও খুব নির্বোধ একটি: আপনার বাড়ির কোনও ঘরে যদি আপনার কিছু গণ্ডগোল হয় এবং আপনার এটি পরিষ্কার করা দরকার হয় তবে আপনার প্রথম পদক্ষেপটি কী হবে? আপনি যে ঘরটি জগাখিচুড়ি করছেন বা পুরো ঘরটি পরিষ্কার করবেন? উত্তরটি অবশ্যই নিশ্চিত যে আপনি কেবলমাত্র ঘরটি পরিষ্কার করবেন যা পরিষ্কারের প্রয়োজন। ভার্চুয়াল ডোম এটিই করে।

সাধারণ জেএস কেবলমাত্র সেই অংশটির পরিবর্তনের পরিবর্তে পুরো ডিওএমকে অনুসরণ করে বা রেন্ডার করে।

সুতরাং যখনই আপনার কোনও পরিবর্তন হবে, যেমন <div>আপনি নিজের ডিওমে অন্য যুক্ত করতে চান তখন ভার্চুয়াল ডিওএম তৈরি হবে যা প্রকৃত ডোমে কোনও পরিবর্তন করে না। এখন এই ভার্চুয়াল ডোমটির সাহায্যে আপনি এটির এবং আপনার বর্তমান ডিওমের মধ্যে পার্থক্য পরীক্ষা করে দেখবেন। এবং শুধুমাত্র পুরো অংশটি আলাদা (এই ক্ষেত্রে নতুন <div>) পুরো ডিওএমকে পুনরায় রেন্ডারিংয়ের পরিবর্তে যুক্ত করা হবে।

Answer 3

ভার্চুয়াল ডিওএম কি?

ভার্চুয়াল ডিওএম হ'ল পৃষ্ঠায় কোনও পরিবর্তন আনার আগে রিঅ্যাক্ট উপাদানগুলি দ্বারা উত্পাদিত আসল DOM উপাদানগুলির একটি ইন-মেমরি উপস্থাপনা।

এটি এমন একটি পদক্ষেপ যা রেন্ডার ফাংশন বলা হচ্ছে এবং স্ক্রিনে উপাদান প্রদর্শন করার মধ্যে ঘটে।

একটি উপাদান রেন্ডার পদ্ধতিটি কিছু মার্কআপ দেয়, তবে এটি এখনও চূড়ান্ত এইচটিএমএল নয়। এটি আসল উপাদানগুলিতে কী পরিণত হবে তার মেমরির উপস্থাপনা (এটি প্রথম ধাপ)। তারপরে সেই আউটপুটটি সত্যিকারের এইচটিএমএলতে রূপান্তরিত হবে যা ব্রাউজারে প্রদর্শিত হয় (এটি দ্বিতীয় ধাপ)।

তাহলে ভার্চুয়াল ডিওএম জেনারেট করার জন্য কেন এই সমস্ত কিছু করা যায়? সহজ উত্তর - এটিই দ্রুত প্রতিক্রিয়া দেখায়। এটি ভার্চুয়াল DOM পৃথক করে এর মাধ্যমে এটি করে। পুরানো এবং নতুন - দুটি ভার্চুয়াল গাছের সাথে তুলনা করা এবং আসল ডিওমে কেবল প্রয়োজনীয় পরিবর্তনগুলি করা।

প্রতিক্রিয়া থেকে ইন্ট্রো থেকে উত্স # 2

Answer 4

এ virtual DOM(ভিডিএম) কোনও নতুন ধারণা নয়: https://github.com/Matt-Esch/virtual-dom ।

ভিডিওএম কৌশলগতভাবে একটি একক পৃষ্ঠার অ্যাপ্লিকেশনটিতে সমস্ত নোড পুনরায় আঁকানো ছাড়াই ডিওএম আপডেট করতে পারে। গাছের কাঠামোতে নোড সন্ধান করা সহজ তবে এসপিএ অ্যাপ্লিকেশনটির জন্য ডিওএম ট্রি মারাত্মকভাবে বিশাল হতে পারে। কোনও ইভেন্টের ক্ষেত্রে নোড / নোডগুলি সন্ধান এবং আপডেট করা সময় সাশ্রয়ী নয়।

VDOM প্রকৃত ডোমটির একটি উচ্চ লেবেল বিমূর্ততা তৈরি করে এই সমস্যাটি সমাধান করে। ভিডিওএম হ'ল একটি উচ্চ স্তরের হালকা ওজনের ইন-মেমরি ট্রি প্রকৃত ডিওএমের উপস্থাপনা।

উদাহরণস্বরূপ, ডিওমে একটি নোড যুক্ত করার বিষয়টি বিবেচনা করুন; প্রতিক্রিয়া মেমরি VDOM একটি অনুলিপি রাখুন

1. একটি নতুন রাষ্ট্রের সাথে একটি ভিডিওএম তৈরি করুন
2. ডিফিং ব্যবহার করে এটি পুরানো ভিডিএমের সাথে তুলনা করুন।
3. বাস্তব ডিওমে কেবলমাত্র ভিন্ন নোড আপডেট করুন।
4. পুরানো ভিডিওএম হিসাবে নতুন ভিডিএমকে বরাদ্দ করুন।

Answer 5

এটি ভার্চুয়াল ডিওমের একটি সংক্ষিপ্ত বিবরণ এবং পুনরাবৃত্তি যা প্রায়শই রিঅ্যাকটিজেএস-এর পাশাপাশি উল্লিখিত হয়।

ডিওএম (ডকুমেন্ট অবজেক্ট মডেল) হ'ল কাঠামোগত পাঠ্যের বিমূর্ততা, যার অর্থ এটি এইচটিএমএল কোড এবং সিএসএস দিয়ে তৈরি। এই এইচটিএমএল উপাদানগুলি ডিওমে নোড হয়ে যায়। ডিওএম চালিত করার আগের পদ্ধতিগুলির সীমাবদ্ধতা রয়েছে। ভার্চুয়াল ডিওএমটি আক্ষরিক এইচটিএমএল ডিওএমটির একটি বিমূর্ততা যা প্রতিক্রিয়া তৈরি হওয়ার আগে বা তৈরির আগে তৈরি হয়েছিল, তবে আমাদের উদ্দেশ্যে আমরা এটি রিঅ্যাকটিজেএসের সাথে মিল রেখে ব্যবহার করব। ভার্চুয়াল DOM হালকা এবং ব্রাউজারে DOM প্রয়োগ থেকে বিচ্ছিন্ন। ভার্চুয়াল ডিওএম একটি নির্দিষ্ট সময়ে ডিওএমের মূলত একটি স্ক্রিনশট (বা অনুলিপি)। এটি বিকাশকারীদের দৃষ্টিকোণ থেকে দেখার একটি উপায় হ'ল ডিওএম হ'ল উত্পাদন পরিবেশ এবং ভার্চুয়াল ডিওএম স্থানীয় (দেব) পরিবেশ। প্রতিবার অ্যাপ্লিকেশনটিতে ডেটা পরিবর্তিত হলে ব্যবহারকারী ইন্টারফেসের একটি নতুন ভার্চুয়াল ডিওএম প্রতিনিধিত্ব করা হয়।

রিঅ্যাক্টজেএসে স্থিতিশীল উপাদান তৈরি করতে প্রয়োজনীয় সবচেয়ে প্রাথমিক পদ্ধতি হ'ল:

রেন্ডার পদ্ধতি থেকে আপনাকে অবশ্যই কোডটি ফেরত পাঠাতে হবে। ক্লাসটি জাভাস্ক্রিপ্টে সংরক্ষিত শব্দ থেকে আপনার অবশ্যই প্রতিটি শ্রেণিকে ক্লাসনেমে রূপান্তর করতে হবে। আরও বড় পরিবর্তনগুলি বাদ দিয়ে ভার্চুয়াল ডিওমে উপস্থিত হওয়া তিনটি বৈশিষ্ট্য সহ এইচটিএমএল ডিওমে (কী, রেফ এবং বিপজ্জনকভাবে সেটআইনার এইচটিএমএল) নয় এমন দুটি ডিওএম-এর মধ্যে সামান্য পার্থক্য রয়েছে।

ভার্চুয়াল ডিওএম নিয়ে কাজ করার সময় একটি গুরুত্বপূর্ণ বিষয়টি হ'ল রিঅ্যাক্টেলমেন্ট এবং রিঅ্যাক্ট কম্পোনেন্টের মধ্যে পার্থক্য।

ReactElement

• একটি রিঅ্যাক্ট এলিমেন্ট একটি হালকা, রাষ্ট্রহীন, অপরিবর্তনীয়, একটি ডম উপাদানটির ভার্চুয়াল উপস্থাপনা।
• প্রতিক্রিয়াশক্তি - এটি প্রতিক্রিয়াটির প্রাথমিক ধরণ এবং ভার্চুয়াল ডিওমে থাকে।

• রিএ্যাক্ট এলিমেন্টগুলি এইচটিএমএল ডিওমে রেন্ডার করা যেতে পারে

  var root = React.createElement('div'); ReactDOM.render(root, document.getElementById('example'));

• জেএসএক্স প্রতিক্রিয়া উপাদানগুলিতে এইচটিএমএল ট্যাগগুলি সংকলন করে

  var root = <div/>; ReactDOM.render(root, document.getElementById('example'));

ReactComponent

• রিঅ্যাক্ট কম্পোনেন্ট - রিঅ্যাক্ট কম্পোনেন্টগুলি হ'ল রাষ্ট্রীয় উপাদান।
• React.createClass একটি ReactComp घटक হিসাবে বিবেচনা করা হয়।
• যখনই রাষ্ট্র পরিবর্তন করে তখন উপাদানটি পুনরায় সরবরাহ করা হয়।

যখনই কোনও রিঅ্যাক্ট কম্পোনেন্টের একটি রাষ্ট্র পরিবর্তন হয়, আমরা যত তাড়াতাড়ি এইচটিএমএল ডিওএমে সামান্য পরিবর্তন চাই তাই রিঅ্যাক্ট কম্পোনেন্টটিকে রিঅ্যাক্টিমেন্টে রূপান্তর করা হয় যা ভার্চুয়াল ডোমে সন্নিবেশ করা যায়, তুলনা করা এবং দ্রুত এবং সহজে আপডেট করা যায়।

যখন প্রতিক্রিয়াটি পৃথক জানেন - এটি নিম্ন-স্তরের (এইচটিএমএল ডিওএম) কোডে রূপান্তরিত হয়, যা ডিওএম এ কার্যকর হয়।

Answer 6

এটি একটি ঝরঝরে ধারণা: সরাসরি ডিওএমকে চালিত করার পরিবর্তে, যা ত্রুটি প্রবণ এবং পরিবর্তনীয় অবস্থার উপর নির্ভর করে, আপনি পরিবর্তে ভার্চুয়াল ডোম নামক একটি মান আউটপুট করেন। ভার্চুয়াল করে DOM তারপর হয় diffed করে DOM, যা করে DOM অপারেশন যে নতুন এক মত বর্তমান করে DOM বানাতে হবে একটি তালিকা তৈরি করে বর্তমান অবস্থা সঙ্গে। এই অপারেশনগুলি একটি ব্যাচে দ্রুত প্রয়োগ করা হয়।

এখান থেকে নেওয়া হয়েছে।

Answer 7

ভার্চুয়াল ডিওএম এইচটিএমএল ডিওমের একটি বিমূর্ততা যা রাষ্ট্রীয় পরিবর্তনের উপর ভিত্তি করে নোডের সাবট্রিকে বেছে বেছে সরবরাহ করে। আপনার উপাদানগুলি আপ টু ডেট রাখার জন্য এটি কমপক্ষে DOM ম্যানিপুলেশন সম্ভব করে।

Comments

বিমূর্ততা সঙ্গে কি করতে হয়? বিমূর্ত শব্দটি এখানে অপ্রাসঙ্গিক

— eladcm

Answer 8

ভার্চুয়াল ডোম ডোমের একটি অনুলিপি তৈরি করা হয়। ভার্চুয়াল ডোমকে ডোমের সাথে তুলনা করা হয় এবং ভার্চুয়াল ডোমটি ডোমের কেবলমাত্র সেই অংশটিই আপডেট করে which এটি পুরো ডোমটি রেন্ডার করছে না এটি ডম-এ ডোম-এর আপডেট হওয়া অংশটি পরিবর্তন করেছে। এটি খুব সময়সাপেক্ষ এবং এই কার্যকারিতা থেকে আমাদের অ্যাপ দ্রুত কাজ করে।

Answer 9

সমস্ত উত্তর দুর্দান্ত। আমি সবেমাত্র একটি উপমা নিয়ে এসেছি যা সম্ভবত একটি বাস্তব-বিশ্বের রূপক দিতে পারে।

আসল ডোমটি আপনার ঘরের মতো, নোডগুলি আপনার ঘরের আসবাব। ভার্চুয়াল ডোমটি হ'ল আমরা এই বর্তমান ঘরের নীলনকশা আঁকার মতো।

আমাদের সকলের আসবাব চলমানের অভিজ্ঞতা রয়েছে, এটি অত্যন্ত ক্লান্তিকর (কম্পিউটারে ভিউগুলি আপডেট করার ক্ষেত্রে একই ধারণা)। সুতরাং, যখনই আমরা অবস্থান পরিবর্তন করতে / আসবাব (নোড) যুক্ত করতে চাই, আমরা কেবল খুব প্রয়োজনীয় পরিবর্তনটি করতে চাই।

এটি অর্জনের জন্য ব্লুপ্রিন্ট এসেছিল উদ্ধারকাজের জন্য। আমরা একটি নতুন ব্লুপ্রিন্ট আঁকে এবং মূলটির সাথে পার্থক্যটি তুলনা করি। এটি আমাদের জানতে দেয় কোন অংশটি পরিবর্তন করা হয়েছে এবং কোন অংশটি একই থাকে। তারপরে আমরা আসল ঘরে প্রয়োজনীয় পরিবর্তনটি করি (আসল DOM এ পরিবর্তিত নোডগুলি আপডেট করুন)। Hurray থেকে।

(কেউ কেউ ভাবতে পারেন, কেন আমাদের ভার্চুয়াল একের উপর নির্ভর করতে হবে এবং আসল ডোমকে সরাসরি তুলনা করতে হবে না? আচ্ছা, সাদৃশ্য অনুসারে, সত্যিকারের DOM এর তুলনা করার অর্থ আপনাকে অন্য একটি আসল ঘর তৈরি করতে হবে এবং এটি আপনার মূলের সাথে তুলনা করতে হবে এটা খুব ব্যয়বহুল।)

Answer 10

এই বিষয়ে শৃঙ্খলা এবং বুদ্ধি তৈরি করা যাক। প্রতিক্রিয়া (বা অন্য কোনও গ্রন্থাগার) জাভাস্ক্রিপ্টে একটি "স্তর"।

ভার্চুয়াল ডোমের মতো কোনও জিনিস নেই, আনটচড ডোম রয়েছে।

আমাকে সহজ জাভাস্ক্রিপ্টে ব্যাখ্যা করতে দিন:

 let vDom = {};     // this is a object that will be used to hold the elements

 let d = document.createElement('div');
 d.innerHTML = 'hi, i am a new div';

 vDom['newDiv'] = d;

এই মুহুর্তে আমরা একটি ডিভ তৈরি করেছি যা ডোমের উপর প্রদর্শিত হয় না, কারণ এটি সংযুক্ত হয়নি

তবে আমরা এটি অ্যাক্সেস করতে পারি, গুণাবলী, মান, পরিবর্তন ইত্যাদি যোগ করতে পারি ..

একবার আমরা কল করব: (প্রাক্তন হিসাবে, এটি শরীরের সাথে যুক্ত করুন)

    document.body.appendChild(vDom['newDiv'])

তাহলে আমরা এটি দেখতে পাব;

 for one how saw javascript libs come and go , i suggest to any one 
 to do one simple thing : master JAVAscript, not layers :)

Comments

"ভার্চুয়াল ডোম বলে কোনও জিনিস নেই" - আছে There প্রতিক্রিয়া কীভাবে কাজ করে তার মূল বৈশিষ্ট্য এটি। এই প্রশ্নের গৃহীত উত্তর এটি বেশ ভালভাবে ব্যাখ্যা করে।

— কোয়ান্টিন