专栏首页前端干货和生活感悟React之childExpirationTime

React之childExpirationTime

前言

在上篇文章React源码解析之workLoop中有提到 React 利用 childExpirationTime,来跳过子树的遍历及渲染,本文讲下 childExpirationTime 的含义和作用。

expirationTime 是如何产生的?

每当节点调用setState,就会产生一个update并且计算出一个expirationTime(关于 expirationTime 的计算,请看:React源码解析之ExpirationTime

childExpirationTime 是如何产生的?

由于 React 的更新是从FiberRoot开始的,所以当某一节点发生更新时,React 会向上遍历,直至找到FiberRoot

在向上遍历的过程中,会顺便找到发生更新节点的父节点,当找到父节点的时候,由于它们的子节点发生了更新,所以会在父节点上设置childExpirationTime

注意: (1)多个子节点更新,取最大的expirationTime作为父节点的childExpirationTime

每个父节点上只会有一个expirationTime和一个childExpirationTime,当有多个子节点都有更新时,取子节点最大的(优先级最高的)expirationTime,作为父节点的childExpirationTime

(2)单个子节点多次更新,取某次更新出的最大的expirationTime作为自身的expirationTime

childExpirationTime 的作用?

在 React 自上而下更新 fiber 树的时候,每个节点会执行update方法,根据expirationTimechildExpirationTime的优先级大小来判断该节点本身、该节点的子节点是否需要在本次渲染(这一帧)的时候更新。

举个例子: 上图的List产生的更新的expirationTime为 250(假设的,实际上是个时间戳),Span1expirationTime为 100,Span2expirationTime为 200,明显 Span2 的优先级高于 Span1,所以ListchildExpirationTime设为 200

其他节点均无更新,expirationTime=NoWork即 0,当 React 自上而下遍历到List节点时,发现它的 fiber 对象的expirationTime大于childExpirationTime,所以会优先执行List自身的更新,如果这一帧留给 React 的时间还够的话,会执行其子节点的更新,否则就跳过,放在下一帧执行

可以想象,如果不设置childExpirationTime的话,还要继续向下遍历获取子节点的expirationTime再拿去跟父节点的expirationTime比较,看谁先更新,是浪费性能的做法。

本文分享自微信公众号 - webchen(webchen1995)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从react 编程 到 "好莱坞"

    Reactive Programming(响应式编程)已经不是一个新东西了。关于 Reactive 其实是一个泛化的概念,由于很抽象,一些理论性的介绍很容易把人...

    Java3y
  • 干货 | GitHub 寻宝指南

    作为一个资深的咨询师、程序员,GitHub 是我用过的最好工具,因为 Google 并非总是那么用。GitHub 是一个宝藏库,可没有藏宝图,GitHub 一 ...

    AI科技评论
  • 说说Netty的线程模型

    最近发现极客时间的很多课程中,都穿插到了 Netty,可见 Netty 的重要性。基于此,给大家推荐一下这篇文章!

    好好学java
  • 请停止学习框架

    我们了解的现代开发工具越多越好,比如Angular,React,Riot,Vue,Ember,Knockout,和这些新技术保持同步真是一件很有意思的事情。

    java思维导图
  • Reactive Programming 一种技术,各自表述

    作为一名 Java 开发人员,尤其是 Java 服务端工程师,对于 Reactive Programming 的概念似乎相对陌生。随着 Java 9 以及 Sp...

    kirito-moe
  • 一个故事讲清楚 NIO

    每来一个顾客,马上由一位职员来接待处理,并且这个职员需要负责以上4个完整流程。当超过10个顾客时,剩余的顾客需要排队等候。

    芋道源码
  • 从零开始学习React-开发环境的搭建(一)

    其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到 了很多招聘要求上都是...

    祈澈菇凉
  • React-Native转小程序调研报告:Taro & Alita

    底线是能转成微信小程序,因为目前来说,因为微信先发制人,再加上微信本身的用户黏性,导致在小程序这一块大多数其他平台都难以迎头赶上,包括支付宝小程序,百度小程序,...

    外婆的彭湖湾
  • Reactive响应式流入门!

    在前一篇文章 从Reactive编程到“好莱坞” 中,谈到了响应式的一些概念,讲的有些发散。但仅仅还是停留在概念的层面,对于实战性的东西并没有涉及。所以大家看了...

    Java3y
  • 技术栈:为什么 Node 是前端团队的核心技术栈

    这篇文章向大家介绍下小菜前端的基建在一步步走过来的过程中,NodeJS 是如何使用的及扮演了哪些角色,它对于工程师个人,团队能力,公司研发效率,业务支撑,技术的...

    石燕平

扫码关注云+社区

领取腾讯云代金券