如何理解react响应式

如何理解react响应式

React中响应式原理

1、开发者只需关注状态转移(数据),当状态发生变化,React框架会自动根据新的状态重新构建UI。

2、React框架在接收到用户状态改变通知后,会根据当前渲染树,结合最新的状态改变,通过Diff算法,计算出树中变化的部分,然后只更新变化的部分(DOM操作),从而避免整棵树重构,提高性能。

状态变化后React框架并不会立即去计算并渲染DOM树的变化部分,相反,React会在DOM的基础上建立一个抽象层,即虚拟DOM树,对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟DOM,最后再批量同步到真实DOM中,而不是每次改变都去操作一下DOM。

为什么不能每次改变都直接去操作DOM树?这是因为在浏览器中每一次DOM操作都有可能引起浏览器的重绘或回流:

* 如果DOM只是外观风格发生变化,如颜色变化,会导致浏览器重绘界面。

* 如果DOM树的结构发生变化,如尺寸、布局、节点隐藏等导致,浏览器就需要回流(及重新排版布局)。

而浏览器的重绘和回流都是比较昂贵的操作,如果每一次改变都直接对DOM进行操作,这会带来性能问题,而批量操作只会触发一次DOM更新。

Image placeholder
前端答疑
未设置
  92人点赞

没有讨论,发表一下自己的看法吧

推荐文章
Java并发编程,深入理解ReentrantLock

ReentrantLock简介ReentrantLock重入锁, 是实现Lock接口的一个类 ,也是在实际编程中使用频率很高的一个锁,支持重入性,表示能够对共享资源能够重复加锁,即当前线程获取该锁再次

Spring Boot 中的响应式编程和 WebFlux 入门

Spring5.0中发布了重量级组件Webflux,拉起了响应式编程的规模使用序幕。WebFlux使用的场景是异步非阻塞的,使用Webflux作为系统解决方案,在大多数场景下可以提高系统吞吐量。Spr

前端-响应式布局

1.使用vw,vh,rem@functionvw($px){ @return($px/1920)*100vw; } @functionvh($px){ @return($px/1075)*100vh

如何理解腾讯云数据库战略升级?

近日,腾讯云数据库在京正式启动战略升级,宣布未来将聚焦云原生、自治、超融合三大战略方向,以用户为中心,联接未来。并在现场面向全球用户同步发布五大战略级新品,包括数据库智能管家DBbrain、云数据库T

面试题:如何理解 Linux 的零拷贝技术?

本文讲解Linux的零拷贝技术,云计算是一门很庞大的技术学科,融合了很多技术,Linux算是比较基础的技术,所以,学好Linux对于云计算的学习会有比较大的帮助。本文借鉴并总结了几种比较常见的Linu

如何理性看待蚂蚁金服OceanBase刷新TPC-C纪录

OceanBase这两天霸屏朋友圈!一派是浮夸的宣传,超越Oracle,世界第一,过度解读,全面否定对手,引起了技术圈内人士的反感,因为刷新TPC-C纪录并不能说明OceanBase现在就超越了Ora

如何在浏览器中获取 Production Mode 的 React 实例

https://github.com/LiuuY/Blog...在ProductionMode下,React并没有暴露其实例。无论什么原因如果你要获取的话可以参考以下方法。条件浏览器安装了ReactD

你真的了解 React 吗?这里有 50 个 React 面试问题

如果你是一位有理想的前端开发人员,并且正在准备面试,那么这篇文章就是为你准备的。本文收集了React面试中最常见的50大问题,这是一份理想的指南,让你为React相关的面试做好充分的准备工作。首先我

React Hooks 完全指南,读React作者博文感悟(2W字精华)

阅读facebook大佬:DanAbramov的文章颇有感悟大佬github地址https://github.com/gaearon 重点总结 useEffect是同步的 状态是捕获的当前props

react学习路线图,学习react就是有捷径

课程推荐:web全栈开发就业班--拿到offer再缴学费--融职教育 文章摘自:https://sunmenglei.blog.csdn.net/article/details/108554788

降低 80% 的读写响应延迟!我们测评了 etcd 3.4 新特性(内含读写发展史)

导读:etcd作为 K8s集群中的存储组件,读写性能方面会受到很多压力,而 etcd 3.4 中的新特性将有效缓解压力,本文将从etcd 数据读写机制的发展历史着手,深入解读 etcd 3.4 新特性

10 分钟彻底理解 Redis 的持久化和主从复制

在这篇文章,我们继续有关Redis方面知识的学习,一起了解一下其中一个非常重要的内容:Redis的持久化机制。什么是Redis持久化?Redis作为一个键值对内存数据库(NoSQL),数据都存储在内存

forEach无法跳出循环的自我理解

最近写代码才偶然发现forEach无法用return跳出循环,有朋友说用break可以跳出,感觉这个解决方案很瞎,试了试确实很瞎!首先break是用在循环体中的,forEach虽然是循环,但是代码写在

1.0. 抽象工厂模式(Abstract Factory)

1.1.1.目的 在不指定具体类的情况下创建一系列相关或依赖对象。通常创建的类都实现相同的接口。抽象工厂的客户并不关心这些对象是如何创建的,它只是知道它们是如何一起运行的。 1.1.2.UML图 1

IBM Spectrum Protect 8.1.7在AIX7.1上的安装和配置

                                                本文作者: 谷铁柏摘要:    本文章主要讲述IBMSpectrumProtect8.1.7版本在AIX

理解 cookie、session、token、jwt

发展史 1、很久以前,Web基本上就是文档的浏览而已,既然是浏览,作为服务器,不需要记录谁在某一段时间里都浏览了什么文档,每次请求都是一个新的HTTP协议,就是请求加响应,尤其是我不用记住是谁刚刚发了

零基础学测试 2 - 进一步理解 Laravel 的测试与 PHP Unit 的关系

细心的读者可以发现,上一讲中创建的用例继承的是PHPUnit的测试基类。

老司机带你深入理解 Laravel 之 Facade

前言 时间真的过的很快啊,今天都2019年12月2号了,准确的说,写这篇博客的时间是晚上21点40分,刚从公司加班回来,洗完澡就坐下来写这篇文章了,不知不觉除这篇博客外,我已经写了11篇了,要讲的东西

第 10 节:复合类型-5. 指针 -- 数组指针与指针数组的辅助理解

5数组指针与指针数组的辅助理解数组指针(也称行指针)定义int(*p)[n];\ ()优先级高,首先说明p是一个指针,指向一个整型的一维数组,这个一维数组的长度是n,也可以说是p的步长。也就是说执行p

深入理解 MySQL—锁、事务与并发控制

本文对MySQL数据库中有关锁、事务及并发控制的知识及其原理做了系统化的介绍和总结,希望帮助读者能更加深刻地理解MySQL中的锁和事务,从而在业务系统开发过程中可以更好地优化与数据库的交互。1.MyS

阿里大佬带你,深入理解线程池底层原理

为什么要使用线程池在实际使用中,线程是很占用系统资源的,如果对线程管理不善很容易导致系统问题。因此,在大多数并发框架中都会使用线程池来管理线程,使用线程池管理线程主要有如下好处:(1)降低资源消耗。通

看完这篇,你还不能理解 ‘数据库架构’?趁早回家吧

来源:http://rrd.me/ep46N一、数据库架构原则高可用高性能一致性扩展性二、常见的架构方案方案一:主备架构,只有主库提供读写服务,备库冗余作故障转移用jdbc:mysql://vip:3

JavaScript中对“this”的简单理解

1.this的奥秘很多时候,JS中的this对于咱们的初学者很容易产生困惑不解。this的功能很强大,但需要一定付出才能慢慢理解它。对Java、PHP或其他标准语言来看,this表示类方法中当前对象的

深入理解JVM - 内存溢出实战

Java堆溢出Java堆用于存储对象实例,只要不断地创建对象,当对象数量到达最大堆的容量限制后就会产生内存溢出异常。最常见的内存溢出就是存在大的容器,而没法回收,比如:Map,List等。出现下面信息

理解Kubernetes网络:pods篇

这篇文章将试图揭开在kubernetes集群中运行的网络的多层神秘感。Kubernetes是一个功能强大的平台,其中包含许多智能的设计选择,但讨论交互的方式可能会造成混淆:Pod网络,服务网络,集群I