Virtual Dom ဘာလဲ ဘယ်လဲ? (part-2)

React ရဲ့ Virtual DOM က page reflow ကို ဘယ်လိုမျိုးလျှော့ချပေးတာလဲဆိုပြီး လာမေးကြလို့ပါ

အောက်က code ကိုကြည့်ပါ

let element = document.getElementById('myImg');
element.width = '100';
element.height = '200';
element.style.margin = '1px';

ဒီ DOM code သည် page reflow 3 ခါဖြစ်‌စေတယ် ဒါကိုကျနော်တို့ React နဲ့ပြန်ရေးကြမယ် user က click နှိပ်လိုက်တဲ့ချိန်ကြရင် အဲ့ DOM code လိုပုံစံမျိူး React နဲ့ရေးလိုက်ပီ ဆိုပါစို့ ဒါဆိုရင် useState သုံးလို့ rerender ဖြစ်သွားပီ rerender ဖြစ်ရင် reconciliation algorithm အရ Virtual DOM အသစ်ကို ထုတ်ပေးပြီး Virtual DOM အဟောင်းနဲ့ယှဉ်တယ်ဗျာ ဒီမှာလာပီ ခုနကကျနော်တို့ change လိုက်တဲ့ UI သည် ဒီ Virtual DOM အသစ်ပေါ်မှာရောက်နေပီ reconciliation algorithm ပြီးတာနဲ့ ဒီကောင်က တကယ့် DOM ပေါ်ကို insert လုပ်ချလိုက်တော့မှာ အဲ့တော့ ဘာဖြစ်သွားလဲဆိုတော့ ခုနက page reflow 3 ခါဖြစ်တာကနေ virtual DOM ကြောင့် တစ်ခါပဲဖြစ်တော့တယ်ဗျာ ကျနော် ဆိုလိုချင်တာ ဒါမျိုးကိုပြောတာ page reflow က browser nature ကြောင့်လုံးဝမရှိအောင်လုပ်မရဘူး ဒါပေမယ့် Virtual DOM က ဒီကောင့်ကို လျော့ချပေးမယ် ခုနကလိုပေါ့ real DOM မှာ reflow သုံးခါဖြစ်ရင် virtual DOM မှာ reflow 1ခါ real DOM မှာ 6ခါဆိုရင် virtual DOM မှာ 2 ခါ ဥပမာအနေနဲ့ပေါ့

ဆိုတော့ အဓိကက React မှာ virtual DOM သည် ခုနက DOM code 3 ကြောင်းလို အစဉ်လိုက် UI ချိန်းတာမျိုးမဟုတ်ပဲ memory ပေါ်မှာ ခဏသိမ်းထားပီး batch အလိုက်တခါတည်း UI ကို ချိန်းပစ်လိုက်တာ ဒါကြောင့် reflow ကနည်းသွားတာ