React တွင် စွမ်းဆောင်ရည် အကောင်းဆုံးဖြစ်အောင် ပြုလုပ်ပေးသော useDeferredValue ဟုခ်အကြောင်း

စွမ်းဆောင်ရည် အကောင်းဆုံးဖြစ်အောင် ပြုလုပ်ပေးသော useDeferredValue ဟုခ်သည် useTransition ကဲ့သို့ပင် ဂရပ်ဖစ်အသုံးပြုသူ အင်တာဖေ့စ်၏လုပ်ဆောင်မှုကို မြန်ဆန်စေရန် ကူညီပေးသော်လည်း နည်းလမ်းအနည်းငယ်ကွဲပြားစွာ လုပ်ဆောင်ပါသည်။

ယခင် သင်ခန်းစာကို ကြည့်ပြီး useTransition ကို အသုံးပြုသောအခါ setFilterTerm အပ်ဒိတ်လုပ်သည့် လုပ်ဆောင်ချက်ကို ကျွန်ုပ်တို့ မည်သို့ထည့်သွင်းခဲ့သည်ကို ကြည့်ပါ။ သတိပြုရန်၊ state ကိုအပ်ဒိတ်လုပ်သည့် ကုဒ်သည် အမြဲတမ်းရနိုင်သည်မဟုတ်ပါ။ ၎င်းသည် ဥပမာ၊ သင် ချိတ်ဆက်ထားသော စာကြည့်တိုက်တစ်ခုတွင် ဝှက်ထားနိုင်သည်။ ထိုသို့သောအခြေအနေတွင် ကျွန်ုပ်တို့သည် useDeferredValue ဟုခ်ကို အသုံးပြုနိုင်ပါသည်။ ထိုအခါ ကျွန်ုပ်တို့သည် state ကိုယ်၌ကို သို့မဟုတ် ၎င်း state ကိုအသုံးပြု၍ တွက်ချက်ထားသော ရလဒ်ကို ထည့်သွင်းကာ ၎င်း၏ဦးစားပေးမှုကို လျှော့ချရန် လိုအပ်ပါသည်။

ယခု ProductList ကလေးကွန်ပိုနင့်၏ ကုဒ်အပိုင်းအစကို ဆန်းစစ်ကြည့်ရအောင်။

ProductList.jsximport {useDeferredValue} from 'react'

function ProductList({ products }) {
  const deferredProducts = useDeferredValue(products);
  
  return (
    <ul>
      {deferredProducts.map((product) => (
        <li>{product}</li>
      ))}
    </ul>
  );
}

ဒီနေရာမှာ ကျွန်ုပ်တို့သည် ကွန်ပိုနင့် props မှရယူထားသော products ကိန်းရှင်ကိုယ်၌ကို useDeferredValue ဖြင့် ထည့်သွင်းထားသည်ကို သတိပြုပါ။ ထို့နောက် ရလဒ်ကို deferredProducts အဖြစ်သိမ်းဆည်းထားပြီး နောက်ပိုင်းတွင် ၎င်းနှင့်ပင် လုပ်ဆောင်သွားမည်ဖြစ်သည်။

ProductList.jsxconst deferredProducts = useDeferredValue(products);

ယခု၊ ကျွန်ုပ်တို့ ယခင်သင်ခန်းစာတွင် လေ့လာခဲ့သော ပင်မကွန်ပိုနင့်၏ ကုဒ်အပိုင်းအစတွင် အောက်ပါစာကြောင်းကို ဖယ်ရှားလိုက်ပါက။

App.jsxconst [isPending, startTransition] = useTransition();

နှင့် isPending ကိုအသုံးပြုသည့် စာကြောင်းကိုလည်း။

App.jsx{isPending && <p>အပ်ဒိတ်လုပ်နေပါသည် ...</p>}

ထို့အပြင် setFilterTerm လုပ်ဆောင်ချက်မှ ထည့်သွင်းမှုကို ဖယ်ရှားလိုက်ပါက၊ ယခင်သင်ခန်းစာကဲ့သို့ပင် ရလဒ်ကိုရရှိမည်ဖြစ်သည်။

App.jsxfunction updateFilterHandler(event) {
  setFilterTerm(event.target.value);
}