zoukankan      html  css  js  c++  java
  • 二、React中的更新

    创建更新的方式:ReactDOM.render||hydrate 初次渲染,然后是setState、forceUpdate

    一、React.render()

    步骤:创建ReactRoot、创建FiberRoot和RootFiber、创建更新,这样我们的应用就到了更新调度。

    什么是FiberRoot : 整个应用的起点,包含应用挂载的目标节点,记录整个应用更新过程的各种信息

    什么是Fiber:

    每一个ReactElement对应一个Fiber对象

    记录节点的各种状态。就是说state和props其实不是记录在class Component里面的,而是记录在Fiber中,只有等Fiber更新之后,classComponent才会更新。

    串联整个应用形成树形结构。串联成Fiber树,主要是通过child,return, sibling这三个树形进行串联在一起

     更新,setState,forceUpdate 只是在源码中的类型,tag不同。

    setState 是同步的还是异步的?

    setState本身的方法调用是同步的。但是调用setState并不意味着state立马就更新了,这个更新得根据当前执行的上下文环境来判断的。如果是处于批量更新的上下文,则state就不是立马更新的。如果不处于批量更新的情况下,是立马更新的。如果异步更新,需要进入异步调度的过程,就不是立马更新的。

    异步调度reactScheduler:维护时间片,模拟requestIdleCallback,调度列表和超时判断。

    维护时间片:浏览器每33ms渲染一遍

  • 相关阅读:
    coffee.js
    domOperation.js
    ImmediateFunc.js
    callback.js
    array.js
    asynchronous.js
    addEventListener.js
    meta的日常设置
    11.11 双十一 前端教你一键领取天猫千张优惠券 (领前先想想有没有钱花这些优惠券)
    前端的最后是逻辑和数学
  • 原文地址:https://www.cnblogs.com/QianDingwei/p/11079025.html
Copyright © 2011-2022 走看看