成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React源碼閱讀之：復(fù)合類型方案設(shè)計(jì)

princekin / 2685人閱讀

摘要：比如這里就是判斷中是否含有這個屬性。這種設(shè)計(jì)方式我覺得挺有參考意義的，可以用在類似權(quán)限系統(tǒng)上。源碼正在閱讀中，有望一兩個月把所有成果放出來，有興趣的可以關(guān)注我

關(guān)于React中一些代碼設(shè)計(jì)

最近在看React的源碼，注意到了一些有意思的細(xì)節(jié)，比如經(jīng)常會出現(xiàn)的一下比較和賦值代碼

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

對于平時基本上沒怎么用到過移位運(yùn)算的我一開始表示這是啥？為啥要這么設(shè)計(jì)？

我們先來看一下，這個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;

這么一看貌似好像有點(diǎn)意思，可以看到大部分的值都只有一位是1，其他位都是0，0bxxx是原生二進(jìn)制字面量的表示方法

那么回過頭去我們再看上面兩句表達(dá)式

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

我們隨便拿兩個值來舉例，比如Placement和Update，也就是0b00000000010 | 0b00000000100那么得到的結(jié)果是什么呢？0b00000000110，也就等于PlacementAndUpdate。所以這時候大家知道為什么大部分的值1所在的位置不一樣了吧，因?yàn)槠鋵?shí)每一位的1代表一種屬性，把他們結(jié)合在一起就代表有多種屬性，不會有重復(fù)。

同樣的對于第二個表達(dá)式

(workInProgress.effectTag & DidCapture) !== NoEffect

我們拿Update和DidCapture來進(jìn)行&操作，那么得到的結(jié)果就很明顯了，所有位都是0，所以后期的&操作是用來判斷在某個變量中是否含有某個屬性的。比如這里就是判斷workInProgress.effectTag中是否含有DidCapture這個屬性。

這種設(shè)計(jì)方式我覺得挺有參考意義的，可以用在類似權(quán)限系統(tǒng)上。大概現(xiàn)在很多權(quán)限系統(tǒng)已經(jīng)這么做了吧，只是我不知道。。。

React源碼正在閱讀中，有望一兩個月把所有成果放出來，有興趣的可以關(guān)注我

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97430.html

相關(guān)文章

  • react源碼解析之stack reconciler

    摘要：爭取把源碼剖析透學(xué)習(xí)透。除了用戶定義的復(fù)合組件外元素還可能表示特定于平臺的主機(jī)組件。裝載的具體結(jié)果有時在源代碼中稱為裝載映像取決于渲染器，可能為節(jié)點(diǎn)字符串服務(wù)器或表示本機(jī)視圖的數(shù)值。其所缺少的關(guān)鍵部分是對更新的支持。 關(guān)于源碼解讀的系列文章，可以關(guān)注我的github的這個倉庫, 現(xiàn)在才剛剛寫，后續(xù)有空就寫點(diǎn)。爭取把react源碼剖析透學(xué)習(xí)透。有不正確的地方希望大家?guī)兔χ刚?。大家互相學(xué)習(xí)...

    ky0ncheng 評論0 收藏0

  • Flow - JS靜態(tài)類型檢查工具

    摘要：介紹是個的靜態(tài)類型檢查工具，由出品的開源碼項(xiàng)目，問世只有一年多，是個相當(dāng)年輕的項(xiàng)目?，F(xiàn)在，提供了另一個新的選項(xiàng)，它是一種強(qiáng)靜態(tài)類型的輔助檢查工具。 showImg(https://segmentfault.com/img/bVH6mL?w=1200&h=675); 本章的目標(biāo)是提供一些Flow工具的介紹與使用建議。Flow本質(zhì)上也只是個檢查工具，它并不會自動修正代碼中的錯誤，也不會強(qiáng)制...

    seanHai 評論0 收藏0

  • react 基礎(chǔ)之組件篇——設(shè)計(jì)復(fù)合組件

    摘要：提醒設(shè)計(jì)組件時，一般都按照把控大局，再設(shè)計(jì)好每個小組件的規(guī)律。本節(jié)內(nèi)容完畢下節(jié)內(nèi)容基礎(chǔ)之組件篇三將講解設(shè)計(jì)復(fù)合組件。 設(shè)計(jì)復(fù)合組件 showImg(https://segmentfault.com/img/remote/1460000015798841); 前言 你問我為什么寫博客? 因?yàn)榘⒗辜訍蹖慴ugger?。?！ 微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請往公眾號，...

    MarvinZhang 評論0 收藏0

  • 從代碼實(shí)踐潛入React內(nèi)部，深入diff

    摘要：概述協(xié)調(diào)，調(diào)解本身不存在公共的。安裝的確切結(jié)果有時在源代碼中稱為取決于渲染器，可以是節(jié)點(diǎn)，字符串或表示原生視圖。關(guān)鍵的缺失部分是對更新的支持。為避免混淆，我們將和的實(shí)例叫做內(nèi)部實(shí)例。但是，內(nèi)部實(shí)例樹包含復(fù)合和主機(jī)內(nèi)部實(shí)例。 本節(jié)是 stack reconciler程序的實(shí)現(xiàn)說明的集合。 本文有一定的技術(shù)含量，要對React公共API以及它如何分為核心，渲染器和協(xié)調(diào)(和解，reconci...

    leap_frog 評論0 收藏0

  • React源碼分析與實(shí)現(xiàn)(一)：組件的初始化與渲染

    摘要：這個函數(shù)內(nèi)處理了的生命周期以及和生命周期鉤子函數(shù)，調(diào)用返回實(shí)際要渲染的內(nèi)容，如果內(nèi)容是復(fù)合組件，仍然會調(diào)用，復(fù)合組件最終一定會返回原生組件，并且最終調(diào)用的函數(shù)生成要渲染的。 原文鏈接地址：https://github.com/Nealyang%EF%BC%9A%E7%BB%84%E4%BB%B6%E7%9A%84%E5%88%9D%E5%A7%8B%E5%8C%96%E4%B8%8E%...

    tomato 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<