React渲染流程

在 React 渲染分为两个阶段,Render 和 Commit,Render 是修改 React 组件的状态,把需要更新的组件标记为待更新,在 Commit 阶段将待更新的组件进行渲染并最终更新到浏览器的 Dom 树中。

Render 阶段是可以并执行操作的,组件状态如有变更,保留新的状态,抛弃老的状态,这个阶段就是虚拟 Dom 更新阶段,不是简单销毁并重新构建,而是通过一系列比较算法只更新有变化的属性。

Commit 阶段是同步执行的,该阶段是进行最终的 Dom 渲染,在最终渲染页面之前会执行组件的useLayoutEffects方法。

下图中描述了渲染流程。

在这里插入图片描述

页面初次渲染完成之后,通过 useState 或者 useReducer 进行数据的更新从而使得 UI 进行再次渲染。React 通过 Batch 方式将所有的数据更新整合在一起,而不是每次都进行更新。这个Batch 机制只是针对 React 的事件,而不会对浏览器的事件进行整合,例如按钮点击这种用户的主动行为。

React 通过底层 Fiber 架构进行组件的状态管理以及更新。React Fiber 是 React 内部的一种协调算法,用于提高 React 应用的性能和灵活性,以后可以具体看一 Fiber 的工作原理。

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

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

相关文章

【Image captioning】基于检测模型网格特征提取——以Sydeny为例

【Image captioning】基于检测模型网格特征提取——以Sydeny为例 今天,我们将重点探讨如何利用Faster R-CNN检测模型来提取Sydeny数据集的网格特征。具体而言,这一过程涉及通过Faster R-CNN模型对图像进行分析,进而抽取出关键区域的特征信息,这些特征在网格结构中被系统地…

【考研数学】准备开强化,更「张宇」还是「武忠祥」?

数一125学长前来回答,选择哪位老师的课程,这通常取决于你的个人偏好和学习风格! 张宇老师和武忠祥老师都是非常有经验的数学老师,他们的教学方法各有特点。 张宇老师的教学风格通常被认为是通俗易懂,善于将复杂的概念…

国际化日期(inti)

我们可以使用国际化API自动的格式化数字或者日期,并且格式化日期或数字的时候是按照各个国家的习惯来进行格式化的,非常的简单; const now new Date(); labelDate.textContent new Intl.DateTimeFormat(zh-CN).format(now);比如说这是按照…

使用RN的kitten框架的日历组件的修改

官方网页地址 下面就是我参考官方封装的时间日期组件(主要是功能和使用方法,页面粗略做了下,不好看勿怪) import React, {useState} from react; import {StyleSheet, View, TouchableOpacity, SafeAreaView} from react-native; …

5 个免费使用 GPT-4o 的方法

5 个免费使用 GPT-4o 的方法 虽然距离 OpenAI 发布 GPT-4o 已过去一天,我仍然对 GPT-4o 感到震撼。Demo 中语音助手功能实在是太令人惊叹了——它咯咯的笑声、准确的语气感叹和歌唱方式让 Siri 和 Google Assistant 显得相形见绌。 虽然备受期待的语音助手功能还要…

【计算机毕业设计】springboot分类信息服务平台移动端的设计与实现

分类信息 服务平台设计的目的是为用户提供活动信息、活动记录等方面的平台。 与PC端应用程序相比,分类信息服务平台的设计主要面向于移动端,旨在为管理员和用户、商铺提供一个分类信息服务平台。用户可以通过Android及时查看活动信息等。 分类信息服务平…

【软件测试】需求概念|软件的⽣命周期|开发模型|测试模型

目录 推荐 一、什么是需求 1.1 ⽤⼾需求 1.2 软件需求 二、开发模型 2.1 什么是“模型” 2.2 软件的⽣命周期 2.3 常⻅开发模型 2.3.1 瀑布模型 2.3.2 螺旋模型 2.3.3 增量模型、迭代模型 2.3.4 敏捷模型 2.4 测试模型 2.4.1 V模型 2.4.2 W模型(双V模型&#xff0…

电脑缺失api-ms-win-crt-runtime-l1-1-0.dll文件的几种修复方法

当您在使用电脑过程中遇到程序启动失败,提示缺少“api-ms-win-crt-runtime-l1-1-0.dll”文件时,不必过于焦虑,此问题通常与Windows系统的Visual C Redistributable组件未正确安装或损坏有关。小编将介绍5种修复电脑缺失api-ms-win-crt-runtim…

在做题中学习(59):除自身以为数组的乘积

238. 除自身以外数组的乘积 - 力扣(LeetCode) 解法:前缀积和后缀积 思路:answer中的每一个元素都是除自己以外所有元素的和。那就处理一个前缀积数组和后缀积数组。 而前缀积(f[i])是:[0,i-1]所有元素的乘积 后缀…

代码随想录训练营Day 29|力扣39. 组合总和、40.组合总和II、131.分割回文串

1.组合总和 题目链接/文章讲解: 代码随想录 视频讲解:带你学透回溯算法-组合总和(对应「leetcode」力扣题目:39.组合总和)| 回溯法精讲!_哔哩哔哩_bilibili 代码:(未剪枝版 &#xf…

aigc在前端中的应用-CodeGeex

前言:目前市场上优秀的智能编程助手有很多,其中以GitHub Copilot,Tabnine为最,但是目前这两款优质的智能编程助手都是需要付费的。如果不选择花费的话,在这里我们向小伙伴推荐免费的智能编程助手codegeex,性…

C#【进阶】委托和事件

委托和事件 文章目录 1、委托1、委托概念2、基本语法3、定义自定义委托4、使用自定义委托5、委托变量可以存储多个函数6、系统定义好的委托思考 怪物死亡数据更新 2、事件1、事件概念2、事件的使用3、为什么有事件思考 热水器 3、匿名函数1、匿名函数概念2、基本语法3、使用4、…