React  و عملگرهای Bitwise

بعد از انتشار نسخه 16.8 و معرفی Context API ، خیلی اتفاقات جدید در ری اکت رخ داد . البته ناگفته نمونه که Context API پیشتر در ری اکت وجود داشت اما همه گیر نبود و به این شکل الان ، کار نمیشد . کاری به معایب و مزایا ندارماینکه ریداکس بهتره یا کانتکست هم در این مقاله نمیگنجهخوب وقتی که Context API ‌معرفی میشه ، مسائل مربوط به به روز رسانی درخت و داده ها هم مطرح میشه ، چرا که Context اگر در هر حالتی به روز رسانی رو انجام بده ، تمام چرخه ری اکت مجددا تکرار رندر میشه و این اتفاق اصلا بهینه نیست . به همین دلیل برای اینکه دقیقتر و درستر بتونه این کارو انجام بده ، از Bitwise Operators استفاده کرد . داخل Context دو عملگر مقایسه ای در ری اکت ایجاد شده به اسم changedBits و observedBits changedBitsدر واقع changedBits زمانی اتفاق میفته که ما قصد تغییر یک مقدار در آبجکتی داخل Provider رو داریم که از طریق Consumer امکان پذیر هست ، به صورتی که این تغییر ، قبل از رخداد ، باید بررسی بشه که آیا با آبجت قبل از خودش یکسان هست یا نه . اگر یکسان باشه ، تغییرات رخ نمیده ، چون منجر به به روز رسانی کامپوننت میشه ، اما اگر تغییرات یکسان نباشن ، به روز رسانی اتفاق نمیفته و کامپوننت مجدد رندر نمیشه . unstable_observedBitsobservedBits نماینده صحت مشاهده بیت هایی هستند که 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 چی هست؟ برای این موضوع ابتدا به لینک زیر برید https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators عملگرهای بیتی ، برای مقایسه صحت دو مقدار ، اول اون مقدار رو به یک داده 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; https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactTypeOfMode.js?source=post_page-----e9506a4578aa---------------------- در کل استفاده از bitwise ها در جاوا اسکریپت برای بالا بردن دقت مقایسه استفاده میشه . امیدوارم که این مقاله مفید باشه .