React DOM Renderer 把react 组件渲染进 DOM. 他实现了顶级的ReactDOM APIs, 在react-dom这个npm包里被暴露出来. 浏览器版叫react-dom.js, 通过ReactDOM这个全局变量暴露出来.
React Native Renderer把react组件渲染到原生视图层里. 他被RN内部使用.
React Test Renderer 把react组件渲染成JSON树, 他被Jest的一个特性Snapshot Testing使用, 在react-test-renderer这个npm包里可用.
另一个官方唯一支持的渲染器是react-art, 他曾经是个独立的库, 现在被移进来了.
注意
技术上react-native-renderer是很薄的一层, 只是用来和RN的实现相互配合, 真正的平台相关代码是RN库里一些native view.
Reconcilers(协调器)相当多的渲染器, 如Reat DOM, React Native 需要共享一套逻辑. 尤其reconciliation算法需要足够的相似, 以便让rendering, 自定义组件, 状态, 生命周期函数和refs能跨平台工作.
为了解决这个问题, 不同的渲染器共用一些代码. 我们把React 中的这个部分叫做"reconciler". 当一个更新比如setState要执行了,Reconcilers就去在组件上调用render(), 然后mounts, updates, 或者unmounts他们.
Reconcilers没有独立成包, 因为他现在还没有公共API. 相反, 他仅仅是在渲染器被使用, 比如React DOM , React Native.
Stack ReconcilerStack Reconciler 是在react15之前实现使用的, 现在已经不用了, 但是下一部分的文档还会有详细的介绍.
Fiber Reconciler"Fiber"是为了解决stack reconciler固有问题和修复长期存在的bug所做的努力, 他从react16开始成为默认的Reconciler.
他的主要目标是:
在chunks里分离可中断的工作
在过程中重建, 重用work或者改变他的优先级(瞎翻译的)的能力
在父子组件前进或回退以只是react中的布局的能力
在render方法里返回多个元素的能力
更好的支持错误边际
你可在这里和这里阅读更多关于Fiber架构的相关信息. 但是React16对他做了封装, 默认不支持异步特性了.
他的源码在packages/react-reconciler里边.
事件系统react实现了一个对renders透明的事件系统, 这个系统被用于react dom 和react native. 源码在packages/events;
这里有个视频https://www.youtube.com/watch?v=dRo_egw7tBc