React源码阅读之：复合类型方案设计

princekin 发布于2019-08-23 11:46 / 2592人阅读

摘要：比如这里就是判断中是否含有这个属性。这种设计方式我觉得挺有参考意义的，可以用在类似权限系统上。源码正在阅读中，有望一两个月把所有成果放出来，有兴趣的可以关注我

关于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源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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