React源碼閱讀之：復合類型方案設計

princekin 發布于2019-08-23 11:46 / 2677人閱讀

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

關于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源碼正在閱讀中，有望一兩個月把所有成果放出來，有興趣的可以關注我

云服務器 GPU云服務器 js復合數據類型 php復合數據類型是 React 源碼 React源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97430.html

react源碼解析之stack reconciler

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

ky0ncheng 2019-08-22 17:30 評論0 收藏0
Flow - JS靜態類型檢查工具

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

seanHai 2019-08-20 13:39 評論0 收藏0
react 基礎之組件篇——設計復合組件

摘要：提醒設計組件時，一般都按照把控大局，再設計好每個小組件的規律。本節內容完畢下節內容基礎之組件篇三將講解設計復合組件。設計復合組件 showImg(https://segmentfault.com/img/remote/1460000015798841); 前言你問我為什么寫博客? 因為阿拉斯加愛寫bugger！！！微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請往公眾號，...

MarvinZhang 2019-08-23 10:27 評論0 收藏0
從代碼實踐潛入React內部，深入diff

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

leap_frog 2019-08-23 14:45 評論0 收藏0
React源碼分析與實現(一)：組件的初始化與渲染

摘要：這個函數內處理了的生命周期以及和生命周期鉤子函數，調用返回實際要渲染的內容，如果內容是復合組件，仍然會調用，復合組件最終一定會返回原生組件，并且最終調用的函數生成要渲染的。原文鏈接地址：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 2019-08-23 11:32 評論0 收藏0