为什么 React 源码不用 TypeScript 来写?

Souleigh ✨ 等级 757 0 0

周末的,看点轻松的吧,之前看过 React 的源码,比较好奇像 React 这样庞大的工程为什么没有用 TypeScript

Facebook 工程师 Cat Chen 在知乎上(https://www.zhihu.com/question/378470381/answer/1079675543)从内部的角度解答了为什么现在 React 的源代码用了 Flow 但没有用 TypeScript

Facebook 是一家技术很厉害的公司,能够超前做一些外界没有的东西,但等外界把这个东西做出来了,Facebook 就发现自己迁移不过去了,被自己过去超前做的技术锁定了,因为迁移成本太高。举个例子,在还没有 webpack 的时候 Facebook 就有自己很好的前端构建流水线,但 webpack 出来后 Facebook 无法迁移到 webpack,甚至无法轻易把 transpiler 迁移到 Babel

如果我没记错的话,Babel 作者 Sebastian McKenzie 进入 Facebook 后做过一个项目,就是帮助 Facebook 迁移到 Babel。为什么呢?因为在外界还没有 Babel 的时候,甚至在 Babel 前身 6to5 还没出现的时候,Facebook 内部的流水线已经有自己的 transpiler,能够把一部分 ES6 语法转译为 ES5。当时我们可爽了,在外部根本还没意识到能这样做事情的时候,我们已经可以随手写 ES6 了。但有了 Babel 后,内部流水线根本不兼容中间插入 Babel 这一步,所以就需要专门改造这个流水线才能迁移到 Babel。而且 Facebook 已有的大量代码的 ES6 写法是基于内部 transpiler 写的,谁能保证迁移到 Babel 后 100% 兼容?迁移到 Babel 后如果编译出错了,那还能找出来修复。如果不出错,但实际执行结果略微不一样,导致出现线上事故,那怎么办?

React 在写的时候,是基于上述 Facebook 内部流水线写的,所以自然是内部有什么工具就依赖什么工具。React 一开始写的时候,其实是没有 BabelTypeScriptFlow 的,但有上述内部 transpiler,所以就这样写了。到后来有了 Flow,而且要保证依赖于 React 的代码能够得到正确的 Flow 类型推断,自然就加上了 Flow 注释。此外,内部流水线应该是从来没做过 TypeScript 支持的,所以估计就算想用 TypeScript 来写也做不到,因为这不是加个 webpack 插件就能支持的。


为什么 Facebook 要做 Flow 而不用 TypeScript?这是一个规模的问题,对于大多数一般人来说没有这个规模是不可能理解的。我可以举若干个故事来解释一下什么是规模,以及为什么大多数人都没有机会解决这类问题,但非常少数的超大规模型公司需要请非常资深的工程师来解决。

第一个例子是为什么 Facebook 不能用 TypeScript,因为 TypeScript 会把所有源代码加载到内存里进行处理。Facebook 用的是 monorepo,也就是一个单体源代码库,不按项目分多个代码库,这使得互相引用的 JavaScript 非常庞大。如果让 TypeScript 直接跑,TypeScript 的内存开销会大到连 Facebook 的服务器都 hold 不住,然后崩溃掉。为此 Facebook 坚持做自己的 FlowFlow 能够分拆要处理的 JavaScript 然后一部分一部分地处理,解决 Facebook 内部的独家问题。Facebook Flow 团队的态度很明确:「这是做给我们自己用的,我们顺手开源而已,你们爱用就用,没人逼你们用。我们会优先做内部需求,社区需求不着急做,如果社区需求跟内部需求冲突的必然让路给内部需求。」

第二个例子是为什么 FacebookMercurial (hg) 而不用 Git,因为 Facebook 几年前每周的 commit 数量就高达五位数,现在可能已经六位数了。这导致每天上班跑一次 git pull --rebase 搞不好就 30 分钟,非常影响生产力,而且一天还可能要跑几次。既然 Git 是开源的,Facebook 就想要去改 Git 源代码,改善自己工作流程的生产力。Facebook 主动去撩 Git,说「我们愿意贡献源代码啊,我们可以优化我们在乎的工作流程的性能,你们愿意接受我们的 Pull Request 吗?」Git 说「滚!这是你们特有的问题,正常的 Git 用户根本没有这么高的 commit 流量,不要引入非必要的复杂度到我们的源代码里。」于是 Facebook 跑去撩 Mercurial,人家说「欢迎来贡献代码」,于是 Facebook 就切换到 Mercurial 了。

第三个例子是 Facebook 特有的 iOS 开发环境优化。跟上面的例子相似,如果当作一个普通的 Xcode 项目打开 Facebook 主应用的源代码,编译一下就 60 分钟,根本无法干活。所以 Facebook 做了一些非常专门的优化,保证大家如果只是改动一两个模块里的代码时,编译速度非常快,一下子就能把 Facebook 主应用编译出来,能看到改动的效果。FacebookApple 的关系不错,就问 Apple 有没有兴趣对 Xcode 做一些相关的优化,Apple 当然表示没兴趣。Apple 说他们真正看重的是那些一两个程序员组成的小开发者,因为这种类型开发者写了绝大部分 App Store 上面的应用,包括大部分的高质量应用。Apple 要优先满足这种类型开发者的需求,而不是 Facebook 这种「仅此一家」的需求。

举这三个例子是为了说明这样一个事情:Facebook 的很多问题是独家的,并不是外部看到的那么简单的问题。有些很多问题是因为规模导致的,做不到 Facebook 这样的规模根本遇不到这样的问题。你可以想象你自己做项目会怎么做,但你把这应用到 Facebook 这样的规模就很可能行不通。

收藏
评论区

相关推荐

为什么 React 源码不用 TypeScript 来写?
周末的,看点轻松的吧,之前看过 React 的源码,比较好奇像 React 这样庞大的工程为什么没有用 TypeScript。 Facebook 工程师 Cat Chen 在知乎上(https://www.zhihu.com/question/378470381/answer/1079675543(https://www.zhihu.com/quest
TS核心知识点总结及项目实战案例分析
前言 最近工作一直很忙,复盘周期也有所拉长,不过还是会坚持每周复盘。今天笔者将复盘一下typescript在前端项目中的应用,至于为什么要学习typescript,我想大家也不言自明,目前主流框架vue和react以及相关生态的内部构建大部分都采用了typescript,其原因就在于它的静态类型检查极大的提高了代码的可读性和可维护性,而且定位问题非常方便。下
关于 Ant Design Form 校验无效的问题
关键词: Ant Design v4.0.2 Form Validation Invalid 校验无效<a name"9pt4x"</a 情景使用 React Typescript Ant Design 重构公司一反洗钱平台部分页面,其一表单需要验证,但是按照 Ant Design Form 中的 Demo 实现后并不效果。<a n
Vue3.0系列——「vue3.0性能是如何变快的?」
前言1. 先学习vue2.x,很多2.x内容依然保留; 2. 先学习TypeScript,vue3.0是用TS重写的,想知其然知其所以然必须学习TS。 为什么学习vue3.0? 性能比vue2.x快1.2~2倍 按需编译,体积比vue2.x更小 组合API(类似React Hook) 更好的TS支持
了解什么是 TypeScript
内容纲要 了解什么是 TypeScript TypeScript 基本语法 TypeScript 介绍 TypeScript 是什么TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并
项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择?先看看市面上都有哪些可用的富文本编辑器: (插件式的,支持 Vue,React,Angular 框架) (Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费,支持 JS 直接引入使用,或者 Vue2/3,React) (开源,插件多,功能齐全,支持
gg
基于 G6 和 React 的可视化图编辑器         [http://ggeditor.com/](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fggeditor.com%2F) GGEditor - Flow的简单使用 -------------------- im
unity3d支持typescript开发(六)
目录 == 1. [unity3d支持typescript开发(一)](https://my.oschina.net/ahl5esoft/blog/4732529 "unity3d支持typescript开发(一)") 2. [unity3d支持typescript开发(二)](https://my.oschina.net/ahl5esoft/blog
Babel 插件手册 笔记
来源:https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md Babel 的使用就是使用一些预设配置。预设就是一组插件,比如env,  stage-3   flow  react  typescript预设。 Ba
React Hooks 完整学习笔记
https://juejin.im/post/5e687c26e51d45272443f7d8 时长:预计 30 min 面向:React Hook 初学者 版本:React 16.13.0 + TypeScript 3.7.2 原文:[获得更好阅读体验](https://www.oschina.net/action/GoToLink?url
React Hooks的999999个好处
最近前几个月开始,新项目都开始完全使用typescript+hooks,先不说typescript吧,hooks是真的香🤣 ### 1.更好的分离页面和逻辑,重用逻辑的方法 现在前端项目的组件化,一般都是基于最基础的UI组件库(里面也有组件的功能逻辑),加上业务逻辑,封装一个个component,container。 > 组件是 UI + 逻辑的复用,
React中常见的TypeScript定义使用
前言 -- 在我学习`typescript`时,想在`react`中使用`typescript`写代码,从头开始的时候是懵逼的,因为官方文档并没有使用`typescript`的教程,多是自己在网上查,自己看定义摸索 所以今天把我用过的,总结归纳一下,希望能帮助到同样在摸索的同学 以下代码`react`版本为`16.13.1`,在`create-reac
TypeScript 快速入门(基础篇)
点击“前端自学社区”查看更多精彩 ![](https://oscimg.oschina.net/oscnet/78d93808-bb83-4b57-b72d-dac371ee338b.png) > 2020了,很多朋友疑问 TypeScript 有必要学吗 > 答案: 当然有必要。 > 现在Vue 3.0 今年预计
TypeScript学习笔记
TypeScript学习笔记 -------------- TypeScript是JavaScript的超集,任何合法的JS程序都是合法的TypeScript程序 TypeScript通过向JavaScript增加可选的静态类型声明来把JavaScript变成强类型程序语言。 静态类型声明可约束函数、变量、属性等程序实体。 TypeScript语言内
ssh 在大厂写React,学到了什么?
前言 -- 进入大厂搬砖也有 3 个月了,我工作中的技术栈主要是 `React + TypeScript`,这篇文章我想总结一下如何在项目中运用 React 的一些技巧解决一些实际问题,本文中使用的代码都是简化后的,不代表生产环境。生产环境的代码肯定比文中的例子要复杂很多,但是简化后的思想应该是相通的。 取消请求 ---- 如果在React里 当前正在