react fiber学习

什么是react fiber(更新中)

fiber是react 16中新的协调引擎,它的主要目标是增量渲染虚拟dom: 能够将渲染工作拆分为多个块并将其分散到多个帧中;
Let’s fall in love with React Fiber
每个react-element对应一个fiber节点
包含的属性:
child
sibling
return
用于串联应用的节点,实际为dfs的过程;

react fiber之前

应用程序更新,React将反复执行创建虚拟结果的过程。 每次,它都会将前一个虚拟树与下一个虚拟树进行比较。
至此, 如果要渲染到DOM,则可能是一个元素上只有一个类被更改。 React将遍历虚拟树,查找已更改的内容,并尽可能少地进行更新。
fiber之前,渲染引擎开始工作,即使用户打字,浏览器停滞或者是宇宙爆炸,渲染引擎都不会停下来;

fiber是怎样高效工作的?

fiber将树计算分解为可以随时commit的工作单元。 工作单元代表组件树中的节点;
fiber后,React可以暂停,恢复和重新启动组件上的工作。 这意味着某些生命周期挂钩可能会触发多次。
componentWillMount
componentWillUpdate
componentWillReceiveProps
将会调用多次,因此在这些函数中不应该进行side effect操作
componentDidMount
componentDidUpdate
中可以进行side effect操作

React可以有一个基于优先级的更新系统,这使得React团队可以微调渲染器,使得react在大多数场景下渲染最快。
{tag: trype:}
ReactWorkTags
dfs

如何重用fiber?

怎样进行任务优先级排序?

时间计算?

如何重新回到中断任务?

react-dom-render

创建ReactRoot
FiberRoot RootFiber 重要的概念
创建更新
进入调度 使用调度器
服务端渲染,使用hydrate
和render唯一的不同的不同是fiorceHydrate的值
使用Root_ATTribute_Name标示是否有服务端渲染;
DOMRenderer.unbatchedUpdates //批量更新中更新全局变量
compudateExpirationForFiber //计算过程
enqueueUpdate
scheduleWork // 开始任务调度 有更新产生
update = createUpdate(expirationTime)
提供了任务优先级概念,在同一时间有各种不同优先级任务在应用中,有工具去调度;

fiber相关的概念

current workInprogress
当前的,进行更新的
渲染完成之后会交换位置,复制过程,创建Object消耗性能,这种技术称为double buffer

在这里插入图片描述
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容

  • React Fiber 结构 介绍 React Fiber 是对React核心算法的重新实现,也是React团队花...
    eaTong阅读 6,900评论 0 4
  • 真是DOM 的缺陷: js 操纵Dom 会 影响到整个渲染流水线 我们可以调用document.body.appe...
    Lyan_2ab3阅读 690评论 0 1
  • 介绍 React Fiber是对React核心算法的不断重新实现。 这是React团队经过两年多研究的结晶。 Re...
    nextChallenger阅读 754评论 0 0
  • 背景 前段时间准备前端招聘事项,复习前端React相关知识;复习React16新的生命周期:弃用了componen...
    萧强阅读 2,206评论 0 2
  • 这是微博上的一张照片,我想很多女生都希望自己也能练成这样的马甲线。 我看到很多女生在健身房猛练卷腹等各种虐腹动作,...
    荔枝晒太阳阅读 1,859评论 0 1