学习React技术揭秘(二)

学习React技术揭秘(二)

前言

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

文章内容均来自于React技术揭秘,此文章仅作为学习笔记。

React15 架构(两层)

  • Reconciler(协调器) —— 负责找出变化的组件

  • Renderer(渲染器) —— 负责将变化的组件渲染到页面上

Reconciler(协调器)

React通过this.setStatethis.forceUpdateReactDOM.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的组件会调用mountComponentupdate的组件会调用updateComponent。这两个方法都会递归更新子组件。

React技术揭秘-15架构.png 由于整个过程都是同步的,所以在用户看来所有的DOM都是同步更新的。 如果中断更新:实际上React15是不会中断进行中的更新

React15架构-中断更新.png 实际上是看不见更新不完全的DOM,基于这个原因,React决定重写架构

分类:
前端
标签: