React源码ReactTypes.js文件中“|”符号的具体含义是什么？

符号实际作用 #

你在shared/ReactTypes.js中看到的|并非JavaScript原生的按位或运算符，而是Facebook自研的静态类型检查工具Flow的语法标记，作用是定义联合类型：表示当前声明的类型可以是|后罗列的任意一种类型。

你贴出的代码是ReactNode的类型定义，表示所有符合React节点要求的内容，都必须是React$Element<any>、ReactPortal、ReactText、ReactFragment、ReactProvider<any>、ReactConsumer<any>这六种类型中的一种。

比如我们日常开发中写的JSX标签、字符串、数字、列表渲染的片段、Context提供者/消费者等，都属于合法的ReactNode，就是由这段类型定义来做约束的。

相关学习与复现方法 #

• 要读懂React源码中的所有类型定义，先掌握Flow的基础语法即可，它的类型系统规则和TypeScript高度相似，有TypeScript基础的开发者可以快速上手。
• 要复现这段类型逻辑，可以本地初始化Flow项目，安装Flow依赖并开启类型检查，复制这段类型定义到项目中，分别给声明为ReactNode类型的变量赋值不同类型的内容：赋值为六种类型之一时不会触发类型报错，赋值其他类型会触发类型校验提示。
• 初次阅读React源码时可以先跳过类型定义细节，先梳理运行时代码的执行流程，对React整体运行逻辑熟悉后再回头看类型定义，理解成本会低很多。

内容的提问来源于stack exchange，提问作者Jim