React و عملگرهای Bitwise

بعد از انتشار نسخه 16.8 و معرفی Context API ، خیلی اتفاقات جدید در ری اکت رخ داد . البته ناگفته نمونه که Context API پیشتر در ری اکت وجود داشت اما همه گیر نبود و به این شکل الان ، کار نمیشد . کاری به معایب و مزایا ندارم

اینکه ریداکس بهتره یا کانتکست هم در این مقاله نمیگنجه

خوب وقتی که Context API ‌معرفی میشه ، مسائل مربوط به به روز رسانی درخت و داده ها هم مطرح میشه ، چرا که Context اگر در هر حالتی به روز رسانی رو انجام بده ، تمام چرخه ری اکت مجددا تکرار رندر میشه و این اتفاق اصلا بهینه نیست .

به همین دلیل برای اینکه دقیقتر و درستر بتونه این کارو انجام بده ، از Bitwise Operators استفاده کرد .

داخل Context دو عملگر مقایسه ای در ری اکت ایجاد شده به اسم changedBits و observedBits

changedBits

در واقع changedBits زمانی اتفاق میفته که ما قصد تغییر یک مقدار در آبجکتی داخل Provider رو داریم که از طریق Consumer امکان پذیر هست ، به صورتی که این تغییر ، قبل از رخداد ، باید بررسی بشه که آیا با آبجت قبل از خودش یکسان هست یا نه . اگر یکسان باشه ، تغییرات رخ نمیده ، چون منجر به به روز رسانی کامپوننت میشه ، اما اگر تغییرات یکسان نباشن ، به روز رسانی اتفاق نمیفته و کامپوننت مجدد رندر نمیشه .

unstable_observedBits

observedBits نماینده صحت مشاهده بیت هایی هستند که Consumer به وسیله value اونها رو دیده .

در واقع Consumer به کمک Value متوجه میشه که چه بیت هایی داخل Provider ارسال شدن و با بیت های خودش مقایسه میکنه . observedBits میتونه متوجه بشه که بیت ها دیده شدن یا نه .

برای اینکه بخوایم با این امکان کار کنیم باید از نسخه unstable ‌کمک بگیریم و یک props به Consumer پاس بدیم .

const Foo = () => (
  <Consumer unstable_observedBits={store.observedBits.foo}> /*pass an object as observer */
    {({foo, update}) => (
      <div>
        <button
          ={() =>
            update((state) => ({...state, foo: state.foo + 1}))  /*if value changed , component will re render */
          }
        >
          click
        </button>
        <p>Foo is {foo}</p>
      </div>
    )}
  </Consumer>
);

در مثال بالا ما یک آبجکت داخل observer پاس دادیم و قصد داریم که به عنوان observer صحت داده ای که در حال تغییر هست رو بررسی کنه و در نهایت به ما بگه که اگر داده تغییر کرد ، کامپوننت را با داده جدید به ما نمایش بده .

Bitwise operators

اتفاق هایی که در بالا دیدیم ، به کمک مقایسه کننده های بیتی انجام میشه .

اما Bitwise Operator چی هست؟ برای این موضوع ابتدا به لینک زیر برید

عملگرهای بیتی ، برای مقایسه صحت دو مقدار ، اول اون مقدار رو به یک داده 32 بیت تبدیل میکنن و در واقع اون رو مقایسه میکنن . مثال :‌

عدد 5 برابر :‌ 00000000000000000000000000000101

اگر ما بخوایم XOR رو در این داده مقایسه کنیم باید تمام 0 ها به یک و یک ها به 0 تغییر کنند که میشه :

11111111111111111111111111111010 که برابر با -6 خواهد بود. چرا منفی؟ چون اولین عدد برابر با 1 هست . اگر اولین عدد برابر 0 بود به شکل 01111111111111111111111111111010 نتیجه 6 مثبت بود . خوب حالا به این نتیجه رسیدیم که

~5=-6

ری اکت هم برای مقایسه در side effect ها، در کانتکست از همین روش استفاده میکنه که داخل این فایل میتونین یک مثال رو ببینین :

export type HookEffectTag = number;

  export const NoEffect = /*             */ 0b00000000;

  export const UnmountSnapshot = /*      */ 0b00000010;

  export const UnmountMutation = /*      */ 0b00000100;

  export const MountMutation = /*        */ 0b00001000;

  export const UnmountLayout = /*        */ 0b00010000;

  export const MountLayout = /*          */ 0b00100000;

  export const MountPassive = /*         */ 0b01000000;

  export const UnmountPassive = /*       */ 0b10000000;

در کل استفاده از bitwise ها در جاوا اسکریپت برای بالا بردن دقت مقایسه استفاده میشه .

امیدوارم که این مقاله مفید باشه .