React源码浏览之：复合范例方案设计

2023年2月5日 179次阅读 来源: Jokcy

关于React中一些代码设想

近来在看React的源码，注重到了一些有意义的细节，比方常常会涌现的一下比较和赋值代码

workInProgress.effectTag |= Ref
(workInProgress.effectTag & DidCapture) !== NoEffect

关于日常平凡基本上没怎么用到过移位运算的我一开始示意这是啥？为啥要这么设想？

我们先来看一下，这个effectTag详细会有那些值

// Don't change these two values. They're used by React Dev Tools.
export const NoEffect = /*              */ 0b00000000000;
export const PerformedWork = /*         */ 0b00000000001;

// You can change the rest (and add more).
export const Placement = /*             */ 0b00000000010;
export const Update = /*                */ 0b00000000100;
export const PlacementAndUpdate = /*    */ 0b00000000110;
export const Deletion = /*              */ 0b00000001000;
export const ContentReset = /*          */ 0b00000010000;
export const Callback = /*              */ 0b00000100000;
export const DidCapture = /*            */ 0b00001000000;
export const Ref = /*                   */ 0b00010000000;
export const Snapshot = /*              */ 0b00100000000;

// Union of all host effects
export const HostEffectMask = /*        */ 0b00111111111;

export const Incomplete = /*            */ 0b01000000000;
export const ShouldCapture = /*         */ 0b10000000000;

这么一看貌似彷佛有点意义，能够看到大部分的值都只要一名是1，其他位都是0，0bxxx是原生二进制字面量的示意要领

那末回过甚去我们再看上面两句表达式

workInProgress.effectTag |= Ref
// 也就是
workInProgress.effectTag = workInProgress.effectTag | RefRef

我们随意拿两个值来举例，比方Placement和Update，也就是0b00000000010 | 0b00000000100那末获得的效果是什么呢？0b00000000110，也就即是PlacementAndUpdate。所以这时候人人晓得为何大部分的值1地点的位置不一样了吧，由于实在每一名的1代表一种属性，把他们连系在一起就代表有多种属性，不会有反复。

一样的关于第二个表达式

(workInProgress.effectTag & DidCapture) !== NoEffect

我们拿Update和DidCapture来举行&操纵，那末获得的效果就很显著了，一切位都是0，所以后期的&操纵是用来推断在某个变量中是不是含有某个属性的。比方这里就是推断workInProgress.effectTag中是不是含有DidCapture这个属性。

这类设想体式格局我以为挺有参考意义的，能够用在相似权限体系上。也许如今许多权限体系已这么做了吧，只是我不晓得。。。

React源码正在浏览中，有望一两个月把一切效果放出来，有兴致的能够关注我

    原文作者：Jokcy
    原文地址: https://segmentfault.com/a/1190000016284033
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞