前言
小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
文章内容均来自于React技术揭秘,此文章仅作为学习笔记。
React15 架构(两层)
-
Reconciler(协调器) —— 负责找出变化的组件
-
Renderer(渲染器) —— 负责将变化的组件渲染到页面上
Reconciler(协调器)
React通过this.setState、this.forceUpdate、ReactDOM.render等API触发更新。 每当有更新发生时,Reconciler会:
-
调用函数组件、类组件的render方法,将返回的JSX转化为虚拟DOM
-
将虚拟DOM和上次更新时的虚拟DOM对比
-
找出本次更新中变化的虚拟DOM
-
通知Renderer将变化的虚拟DOM渲染到页面上 官网对Reconciler的解释
Renderer(渲染器)
由于React支持跨平台,所以有不同的Renderer。而负责浏览器环境渲染的Renderer——ReactDOM。
除此之外,还有:
-
ReactNative渲染器,渲染App原生组件
-
ReactTest渲染器,渲染出纯JS对象用于测试
-
ReactArt渲染器,渲染到Canvas、SVG或VML(IE8) 每次更新发生时,Renderer接收Reconciler的通知,将变化的组件渲染到当前宿主环境。
官网对Renderer的解释
React15架构的缺点
在Reconciler中,mount的组件会调用mountComponent,update的组件会调用updateComponent。这两个方法都会递归更新子组件。
由于整个过程都是同步的,所以在用户看来所有的DOM都是同步更新的。
如果中断更新:实际上React15是不会中断进行中的更新
实际上是看不见更新不完全的DOM,基于这个原因,React决定重写架构。