zoukankan      html  css  js  c++  java
  • 从源码的角度看 React JS 中批量更新 State 的策略(下)

    截图

    这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用。

    前置文章列表

    1. batchingStrategy 策略

    现在我们开始来看 batchingStrategy 的策略定义。
    目前 React 中 batchingStrategy 的定义为 ReactDefaultBatchingStrategy
    ReactDefaultBatchingStrategy 包含两部分。

    • 最重要的部分 FLUSH_BATCHED_UPDATES。

    截图

    源码地址

    实现在这里。
    注意实现里定义了一个叫 pooled 的东西,后续我们会展开讨论这样设计的原理与好处。
    React 将所有的组件丢到 pool 中去,然后都交给 runBatchedUpdates 去执行更新操作了。
    同样,还有一个 asap 的概念,也在后续文章中讨论。

    截图

    源码地址

    对所有的组件进行 performUpdateIfNecessary 的判断,并更新组件。

    截图

    源码地址

    • 另一个实现为 RESET_BATCHED_UPDATES,用于将 isBatchingUpdates 重置为 false,等待下次组件的批量更新。

    截图

    源码地址

    2. 组件是否需要更新的比较 performUpdateIfNeeded

    两个逻辑,比较组件是否需要更新,以及第二种条件下直接进行强制更新。
    ReactReconciler.receiveComponent 在元素级别进行了比较,不过不一样那么就调用 receiveComponent
    其他状态直接调用 updateComponent
    注意这里的 updateComponent 函数的内部实现是递归的,这样的设计便于及时获取到哪些组件是已更新的状态,便于前台进行获取使用。

    截图

    截图

    到这里我们就把整个 React 的更新逻辑策略的部分走完了,接下来我们会继续看一下 React 如何进行页面UI 的更新以及一些遗留的小知识点。

  • 相关阅读:
    N皇后问题
    SDNU1349.快速幂入门
    SDNU1522.陆历川学数学
    埃氏筛
    快速幂
    string函数
    Golang介绍以及安装
    Promise解决回调地狱(多层调用问题)
    JavaScript动画相关
    ES6简单语法
  • 原文地址:https://www.cnblogs.com/parry/p/8891513.html
Copyright © 2011-2022 走看看