react原理篇:react局部更新实现方式(虚拟DOM和Diff算法)

已于 2022-07-29 16:15:16 修改
阅读量1.5k 收藏 2
点赞数 1
分类专栏： react
于 2022-07-29 16:06:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45877477/article/details/126057829
版权

前端 react.js

react更新视图的思想:只要state变化了,就重新渲染视图
部分更新,只更新变化的地方

问题:react是如何做到部分更新的?
答:虚拟DOM + Diff算法

虚拟DOM:本身就是一个JS对象,用来描述你希望在屏幕上看到的内容(UI)

 

虚拟DOM的好处:
1 不仅仅是提升了性能
2 最大的好处是 让react脱离了浏览器的束缚 → 为react跨平台操作提供了一个保障(移动端应用,VR应用)
    因为虚拟DOM是JS的一个对象,只要能运行js的地方就能运行react

铃俐
关注
专栏目录
React 项目记录（五）——React 实现局部刷新
怪力马猴烧酒的博客
01-20 1万+
前言 有些时候，我们想要点击左边的菜单栏，使右边的内容进行局部刷新。这时候我们就可以通过 react router 来实现。进入页面的流程分为：入口文件->路由->菜单->需要局部刷新的页面 Step 1：配置路由 我们首先在路由配置文件中，配置路由路径 import React, { Component } from 'react' import { BrowserRouter...
局部刷新-react-hot-loader
jc8189533的博客
04-07 405
局部刷新-react-hot-loader react-hot-loader 和 webpack-dev-server 的区别是局部和全局刷新，作为一个喜欢高效工作的开发，react-hot-loader 无疑是一个更好的选择，言简意赅，下面说说配置方法。 1、安装 react-hot-loader npm install --save-dev react-hot-loader 2、在 webpack.config.js 的 entry 值里加上 react-hot-loader/patch，一定要写在e
React实现实时/局部刷新
九月萩的博客
08-31 7998
在React项目中，经常会遇到诸如：删除某一行的同时同时刷新表格展示最新的表格，而不是删除后，手动刷新。 原先是在删除时再次调用生命周期函数中展示表格列表的函数，但会影响性能。 总结：通过JS数组修改usestate中的状态。 初始做法示例： ...... useEffect(() => { httpOffer() }, []) //获取列表 const httpOffer = () => { offerList() .
React使用Outlet实现路由跳转时局部刷新页面
最新发布
庸人方自扰，自在就好
05-10 1938
应该在父路由元素中用来渲染其子路由元素。这允许在渲染子路由时显示嵌套的 UI。如果父路由完全匹配，则将渲染子索引路由；如果没有索引路由，则不渲染任何内容。第82行插入Outlet组件。
react 热加载，局部刷新，babel-preset-react-hmre
小楼一夜听春雨
07-12 6215
react热加载 在没有使用相关插件之前，以我开发为例，只用webpack-dev-server --inline时候，当组件经过更改保存后，页面会进行重新刷新，如果是简单的应用这样做可以，但是一旦复杂起来，重新刷新后就不得不经过很多操作后回到之前的状态，显然这样的情况是我们不愿意看到的，而且大大降低了开发效率，所以我这里选择了babel-preset-react-hmre，利用它便可以实现局部刷新
react局部刷新
weixin_33890499的博客
06-29 828
react局部刷新 参考文章 react-hot-loader 安装 依赖webpack-dev-server $ npm i --save-dev webpack-dev-server $ npm i --save-dev react-hot-loader 使用 代码 新建server.js var webpack = require...
React进阶-虚拟 DOM 和 Diff 算法
m0_62118859的博客
05-03 1506
1.虚拟 DOM 虚拟 DOM（Virtual DOM），就是一个 JS 对象，用来描述我们希望在页面中看到的 HTML 结构内容. 为什么使用虚拟 DOM？ 真实 DOM 对象属性多，处理起来繁琐、效率低。更重要的原因：React 要做跨平台开发，而不是被束缚在浏览器端。 原生 DOM 对象： 也是一个 JS 对象，是浏览器默认提供的 DOM 对象 和 HTML 元素之间是一一对应的关系 const element = { type: 'h1', props: { clas.
解析React 虚拟DOM和Diff算法
qq_36697163的博客
01-13 456
一、 JSX 众所周知，React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展，其本质是 createElement()方法的语法糖 （语法糖：更加直观、简洁、友好）。 JSX 代码会经过babel-loader 会解析为 React.createElement()嵌套对象。React.createElement() 创建的就是一个虚拟DOM结构。 二、 虚拟DOM 通过React.createElement(…)创建的虚拟DOM描
「React深入」一文吃透虚拟DOM和diff算法
郊眠寺
07-20 493
大家好，我是小杜杜，React中的和是非常核心的特型，了解它们是非常有必要，只有了解，才能深入。虚拟DOM真实的DOMReact虚拟DOMdiff算法diff算法diff策略key如果你对上述问题有疑问，那么这篇文章一定能够帮助到你～跟之前一样先附上这篇的知识图，还请各位多多支持[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gi7s86Es-1658297236093)(https4536000.image?)]...
React面试：谈谈虚拟DOM，Diff算法与Key机制
beifeng11996的博客
10-24 320
B、C，与旧集合相比只有 D 节点移动，而 A、B、C 仍然保持原有的顺序，理论上 diff 应该只需对 D 执行移动操作，然而由于 D 在旧集合中的位置是最大的，导致其他节点的 _mountIndex
【JavaScript源代码】react中的虚拟dom和diff算法详解.docx
12-29
总的来说，React的虚拟DOM和Diff算法是现代前端开发中的重要优化手段，它们让JavaScript框架能够以更高效的方式处理UI更新，提高用户体验，同时也简化了开发者处理DOM的复杂性。在React中，理解虚拟DOM的工作原理...
React工作44:只更新它需要更新的部分
qq_41632427的博客
07-17 225
vue
react native 实现ListView的局部更新
君无意的博客
06-12 4490
在ReactNative中UI的刷新大多数情况依赖于state的变更，通过调用组件的setState方法来更新state以达到通知组件重新渲染UI的目的。当然这种做法是官方提供的标准解决方案，在进行简单UI设计时足以满足大多数需求。 但是当遇到结构复杂并存在数据交互的界面设计时，手动管理state这种做法则会把代码逻辑变得非常混乱，组件内不但要负责UI的渲染，还要兼顾state的变更以及不同组件
react 局部定时刷新数据
zm_miner的博客
10-30 8912
在react 中不想刷新整个页面, 只想定时刷新数据而已 直接上代码 class Refresh extends React.Component { static propTypes = { classes: PropTypes.object, } constructor() { super(); this.state = { reload: fa...
react使用react-hot-loader实现局部热更新
przlovecsdn的博客
08-16 9887
Q：webpack-dev-server 已经是热加载，为何还要在 react 项目还要安装 react-hot-loader 呢？ A：其实这两者的更新是有区别的，webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面。而 react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。但它需要依赖 webpack ...
React实现局部刷新
01-12 3261
【项目结构】 流程： 入口文件 -> 路由 -> layout -> Analysi/Monitor/Workspace 1.入口文件 -> src/index.js 2.组件 -> src/coms 3.布局 -> src/layout 4.路由 -> src/routes 【流程解析】 流程： 入口文件 -&gt...
react native 组件间通信 局部刷新
吴蕴强的博客
09-21 9444
组件化是react-native的最大优点之一，因为组件化我们可以做到局部刷新，提高性能。 如图所示 父组件包含连个子组件 添加可以动态增加子组件 log输出： add关键代码： _onPress() { if(show){/*显示删除时 不能添加*/ return ; } let arr = t
React+Hooks组件刷新
weixin_67150966的博客
05-24 1888
例如： initialValues修改时，组件BaseInfoUpdata理论上应该随之刷新。但有时候，组件并未随之刷新。有可能我们的变量存储的是state的地址而不是值。理论上，执行了setState()的方法更新过state，组件就会刷新。二是创建一个冗余变量refresh，来强制刷新。一是如参考网址中的，修改state存储的值。可以在在useEffcet中 ，用es6方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值