React16源码: React中的setState和forceUpdate源码实现

setState 和 forceUpdate

1 ) 概述

  • 通过 class component 内部的 setState,以及 forceUpdate 去更新一个组件的过程
  • 在react的应用当中,我们只有 ReactDOM.render setState,以及 forceUpdate
  • 这几种种方式去更新react的应用是合理的,其他没有什么特别常用的方式去更新了
  • 而且react官方推荐的也是用这些。forceUpdate 其实本身也不是特别推荐的
  • 因为有比较特殊的作用,以及比较特殊的使用场合, 也算是一个比较有用的API
  • 在React16.7之后发布的Hooks, Hooks里面我们通过
  • useState 返回过来的一个方法,也可以去更新一个组件的状态
    • 这块看不到源码,只能看到打包之后的代码
    • 它的设置比较特殊,这块先跳过
  • setState,以及 forceUpdate的核心,首先是他们是给节点 Fiber 去创建更新的
  • 对于 ReactDOM.render 来说,它创建的 update 是放在root上面
  • 它是一个整体的渲染,因为执行 ReactDOM.render 的时候
  • 整个应用都没有任何的产生,任何的节点都没有生成,是一个初始的渲染
  • 所以 setStateforceUpdate 是针对某一个 class component 来说的
    • 这个 class component 的状态来进行更新
    • 把新的状态计算并渲染出来
  • setStateforceUpdate 两者更新的类型不同
    • 它们上面有 UpdateState, ForceUpdate 两种不同的 tag
    • 这个tag就对应的它们是更新的类型不同

2 )源码

  • 先跳过 组件如何去渲染

    • 也就是我们的 class component,什么时候会被实例化
    • 这个涉及到后面的更新的流程
  • 我们的component的BaseClass在初始化的时候会拿到一个update的这个对象

  • 这个对象来自于哪个地方

  • 源码: https://github.com/facebook/react/blob/v16.6.0/packages/react-reconciler/src/ReactFiberClassComponent.js

  • 这个文件中,有涉及很多 class 相关的代码

    const classComponentUpdater = {isMounted,enqueueSetState(inst, payload, callback) {const fiber = ReactInstanceMap.get(inst); // inst 是调用 this.setState 时的 this,在react渲染的时候会通过 `ReactInstanceMap` 做映射和获取 Fiber对象const currentTime = requestCurrentTime();const expirationTime = computeExpirationForFiber(currentTime, fiber);const update = createUpdate(expirationTime);update.payload = payload; // 这里 payload 是 setState时传入的对象if (callback !== undefined && callback !== null) {if (__DEV__) {warnOnInvalidCallback(callback, 'setState');}update.callback = callback; // 挂载 callback}enqueueUpdate(fiber, update); // 把fiber对象的updateQueue进行初始化或更新scheduleWork(fiber, expirationTime); // 进行调度处理},enqueueReplaceState(inst, payload, callback) {const fiber = ReactInstanceMap.get(inst);const currentTime = requestCurrentTime();const expirationTime = computeExpirationForFiber(currentTime, fiber);const update = createUpdate(expirationTime);update.tag = ReplaceState;update.payload = payload;if (callback !== undefined && callback !== null) {if (__DEV__) {warnOnInvalidCallback(callback, 'replaceState');}update.callback = callback;}enqueueUpdate(fiber, update);scheduleWork(fiber, expirationTime);},enqueueForceUpdate(inst, callback) {const fiber = ReactInstanceMap.get(inst);const currentTime = requestCurrentTime();const expirationTime = computeExpirationForFiber(currentTime, fiber);const update = createUpdate(expirationTime);update.tag = ForceUpdate;if (callback !== undefined && callback !== null) {if (__DEV__) {warnOnInvalidCallback(callback, 'forceUpdate');}update.callback = callback;}enqueueUpdate(fiber, update);scheduleWork(fiber, expirationTime);},
    };
    
    • 这里面主要关注, enqueueSetStateenqueueForceUpdate 这两个enqueue 方法几乎一样,两者区别 看 update.tag
    • 看了上面的源码,发现 和 react-reconciler/src/ReactFiberReconciler.js 中的 updateContainer 很像
      • 内部调用 updateContainerAtExpirationTime 接着调用 scheduleRootUpdate 在这里面都基本相似
  • 所以,在React中创建更新的过程都是差不多的,创建完更新后,进入队列,就会进行整个应用的更新

  • React 是一个非常纯粹的框架,所有的核心都是服务应用的整体更新的, 就是 scheduleWork 函数进入之后的整体更新流程

  • 这块在React整体的代码量中占据非常大的比例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/611173.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux】修改Linux远程登录用户并授权,禁止root远程登录,修改Linux登录端口

一、修改Linux远程登录用户并授权 添加一个新的普通用户 用如下命令 adduser newuser 修改密码 passwd newuser 根据提示 输入密码 赋予newuser root 权限 修改 /etc/sudoers 文件 找到如下一行 ,取消注释 ##Allows people in group wheel to run all commands %wh…

C# 学习笔记2-控制流与类型转换

控制流与类型转换 关于变量的简单操作判断循环类型转换异常处理检查数字类型的溢出 变量操作 一元运算符 Unary operators x,x,x--,--x。 这些运算符同 C。 postfix operator 后置运算符 还有 typeof(int),sizeof(int)。 …

最新GPT4、AI绘画、DALL-E3文生图模型教程,GPT语音对话使用,ChatFile文档对话总结

一、前言 ChatGPT3.5、GPT4.0、GPT语音对话、Midjourney绘画,文档对话总结DALL-E3文生图,相信对大家应该不感到陌生吧?简单来说,GPT-4技术比之前的GPT-3.5相对来说更加智能,会根据用户的要求生成多种内容甚至也可以和…

【轮式移动机器人课程笔记 5】运动学仿真

L5 运动学仿真 本节重点: 如何理解推导出的运动学模型 回顾:机器人运动学模型 正向(前向)运动学模型反向运动学模型 基于MatLab运动学仿真 本节重点,如何利用matlab对运动学进行仿真 5.1 回顾运动学模型 [ x ˙ y …

离线AI聊天清华大模型(ChatGLM3)本地搭建

在特定的情况下,要保证信息安全的同时还能享受到AIGC大模型带来的乐趣和功能,那么,离线部署就能帮助到你,最起码,它是一个真正可用的方案。 大模型本身清华的 (ChatGLM3),为的是对中文支持友好&#xff0c…

kotlin的接口详解

在 Kotlin 中,接口(Interface)是一种定义了一组方法的抽象类型。与类不同,接口不能包含状态或字段。接口中的方法可以有默认实现,也可以是抽象的需要在实现类中提供具体实现的方法。 为什么要使用接口? 多…

2696. 删除子串后的字符串最小长度 --力扣 --JAVA

题目 给你一个仅由 大写 英文字符组成的字符串 s 。 你可以对此字符串执行一些操作,在每一步操作中,你可以从 s 中删除 任一个 "AB" 或 "CD" 子字符串。 通过执行操作,删除所有 "AB" 和 "CD" 子串&a…

pythonnumpy十三:借助numpy解方程

使用NumPy进行解方程可以涉及线性方程组和非线性方程的求解。下面将给出详细的示例: 1.解线性方程组: 考虑以下线性方程组: 2x 3y 6 4x 5y 7我们可以使用NumPy的linalg.solve()函数求解该线性方程组。 import numpy as np# 定义系数矩…

Unity Editor实用功能:Hierarchy面板的对象上绘制按按钮并响应

目录 需求描述上代码打个赏吧 需求描述 现在有这样一个需求: 在Hierarchy面板的对象上绘制按钮点击按钮,弹出菜单再点击菜单项目响应自定义操作在这里的响应主要是复制对象层级路路径 看具体效果请看动图: 注: 核心是对Edito…

【2024系统架构设计】 系统架构设计师第二版-安全架构设计理论与实践

目录 一 安全架构概述 二 安全模型 三 系统安全体系架构规划框架 四 信息安全整体架构设计 五 网络安全体系架构设计 六 数据库系统安全设计

霹雳吧啦Wz《pytorch图像分类》-p6MobileNet网络

《pytorch图像分类》p6MobileNet网络结构详解 1 MobileNet v1网络1.1 Depthwise convolution(DW卷积)1.1.1Depthwise separable convolution(深度可分的卷积操作) 1.2 增加超参数α和β 2 MobileNet v2网络2.1 Inverted Residuals…

无标题无标题

ABC Puzzle 326D 题意:给两个长n的仅由ABC组成的字符串s1,s2,是否在n*n阵列中满足以下条件,若满足则输出,不满足输出No 条件1:每行每列仅包含一个A,一个B,一个C &#x…

传统 VC 机构,是否还能在 Fair launch 的散户牛市中胜出?

LaunchPad 是代币面向市场的重要一环,将代币推向市场,加密项目将能够通过代币的销售从市场上募集资金,同时生态也开始进入全新的发展阶段。而对于投资者来说,早期打新市场同样充满着机会,参与 LaunchPad 对于每一个投资…

2023年十大零日漏洞攻击

2023年,随着勒索软件和APT组织纷纷调整攻击策略,零日漏洞攻击快速升温并有望在2024年延续这一趋势。 根据谷歌威胁分析小组今年7月发布的报告,2021年野外利用零日漏洞数量(69个)创下历史新高后,2022年有所…

Leetcode的AC指南 —— 字符串 :459. 重复的子字符串

摘要: **Leetcode的AC指南 —— 字符串 :459. 重复的子字符串 **。题目介绍:给定一个非空的字符串 s ,检查是否可以通过由它的一个子串重复多次构成。 文章目录 一、题目二、解析 (go语言版)1、KMP的next数…

ubuntu 18.04网络问题

ubuntu 18.04网络问题汇总 准备工作一、有线网卡不可用二、无法访问外网 准备工作 安装好系统之后,检查gcc和make是否已经安装 $ which gcc /usr/bin/gcc $ which make /usr/bin/make如果未安装,则安装gcc和make $ apt install gcc $ apt install mak…

Python学习之路-编码风格

Python学习之路-编码风格 设计哲学 Python的设计哲学是“优雅”、“明确”、“简单”。它的重要准则被称为“Python之禅”。Python之禅又名PEP 20,在Python解释器内运行import this可以获得完整的列表,下面是我的翻译与解读: 提姆彼得斯&a…

基于ssm个性化旅游攻略定制系统设计与实现+jsp论文

摘 要 在如今社会上,关于信息上面的处理,没有任何一个企业或者个人会忽视,如何让信息急速传递,并且归档储存查询,采用之前的纸张记录模式已经不符合当前使用要求了。所以,对个性化旅游攻略信息管理的提升&…

GO语言笔记2-变量与基本数据类型

变量使用步骤 声明赋值使用 package main import "fmt" func main(){var age int //声明一个 int类型的变量叫ageage 18 //给变量用 赋值fmt.Println(age) //使用变量 输出变量的值 } 编译运行输出变量值 变量的四种使用方式 package main import "fmt&q…

InnoDB引擎

一、逻辑存储结构 ① 表空间(ibd文件),一个mysql实例可以对应多个表空间,用于存储记录、索引等数据。 ② 段,分为数据段(Leaf node segment)、索引段(Non-leaf node segment&#x…