react 更新节点流程

最新推荐文章于 2023-10-19 10:00:00 发布
最新推荐文章于 2023-10-19 10:00:00 发布
阅读量696 收藏
点赞数
分类专栏： react react源码解析 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38074118/article/details/113756077
版权

react 更新节点流程

  1. 在进入页面，调用react.render方法接收jsx代码并且显示在界面中

  2. 实现界面更新，需要拿新节点和旧节点进行对比，找出差异部分，更新到页面中，实现页面的最小 化更新

  3. 在创建节点时候，新添加一个属性存储对应的virtual dom，
    在diff中，判断旧的virtual dom是否存在，
    节点类型相同时候
    如果不是旧节点，根据type推断是文本还是元素，文本使用updateTextNode更新内容，元素使用updateNodeElement方法进行更新节点，内部删除之前的事件处理函数，循环对象判断是不是新属性存不存在，属性被删除更新
    在diff中还需要循环递归调用diff方法对比对应的子元素和旧节点
    节点类型不同时候不需要进行比对，根据新的type类型和旧type类型不同且新dom的type不是function判断，
    只需要新的virtual dom对象生成新的dom对象，使用新的dom替换旧的dom就可以，使用createDOMElement方法

    在进行节点对比时，遵循同级节点比较，执行深度优先的顺序

  4. 节点删除在节点对比完成之后，然后分析那些节点需要被删除，删除的是一个范围，
    删除的就是在节点对比完成之后，旧节点多余新节点说明需要被删除
    在diff后，使用oldDOM.childNodes获取旧节点数量对比新的节点length

进阶__前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React Flow是一个高度可定制的库，用于构建基于节点的交互式编辑器，流程图和图表-React开发
05-27
React Flow是一个用于构建基于节点的图的库。 您可以轻松实现自定义节点类型，并且它附带一些组件，例如迷你地图和图形控件。 React Flow React Flow是一个用于构建基于节点的图的库。 您可以轻松实现自定义节点类型...
React-组件刷新问题(函数组件)
m0_55944215的博客
11-26 5392
React 函数组件执行了setState，但是没有触发更新。
react实现再调render时,子组件如何重新更新
weixin_34235135的博客
04-11 2925
通过给子组件添加不同的key即可,每次父组件执行rend方法时,发现key不同就会重新加载子组件 key=Math.random() 转载于:https://www.cnblogs.com/emma-zhao/p/10687393.html...
React组件渲染和更新的过程
老电影故事的博客
10-19 370
将reconciliation阶段进行任务拆分（commit无法拆分，dom渲染无法拆分）1、reconciliation阶段-------执行diff算法， 纯JS计算。2、commit阶段--------将diff结果渲染DOM。同时再有DOM操作需求（动画、鼠标拖拽等），将卡顿。当组件足够复杂，组件更新时计算和渲染都压力大。React的patch可以被拆分为2个阶段。js是单线程，且和DOM渲染公用一个线程。（是React内部机制，开发者体会不到）DOM需要渲染时暂停，空闲时恢复。
React实现局部刷新
01-12 3211
【项目结构】 流程： 入口文件 -> 路由 -> layout -> Analysi/Monitor/Workspace 1.入口文件 -> src/index.js 2.组件 -> src/coms 3.布局 -> src/layout 4.路由 -> src/routes 【流程解析】 流程： 入口文件 -&gt...
深入React源码揭开渲染更新流程的面纱
It_kc的博客
02-13 562
render会调用方法中，如果是第一次渲染，会先初始化FiberRoot，其为应用的起点。同时生成根节点的Fiber实例。这里Fiber;FiberRoot。调用会计算出此次更新的过期时间。并生成任务对象update，将其插入Fiber中的更新队列，然后调用触发任务调度会更新以该Fiber节点为根节点的整棵Fiber树的过期时间。然后调用进行调度中会绑定任务与具体执行函数。然后交由Scheduler处理。
基于JavaScript/React/Vue2的流程图组件
最新发布
05-08
一个基于JS的数据驱动的节点式编排组件库 特性 丰富DEMO，开箱即用 全方位管理画布，开发者只需要更专注定制化的需求 利用DOM/REACT/VUE来定制元素；灵活性，可塑性，拓展性优秀
浅谈从React渲染流程分析Diff算法
12-13
React中最神奇的部分莫过于虚拟DOM，以及其高效的Diff算法。...在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtual DOM。 简单的说，其实所谓的vir
react-flow：高度可定制的库，用于构建基于节点的交互式UI，编辑器，流程图和图表
02-05
React Flow是一个用于构建基于节点的图的库。 您可以轻松实现自定义节点类型，并且它附带一些组件，例如迷你地图和图形控件。 随意查看或阅读以开始使用。 网站： ： 文档： : 范例： ： 网站/文档存储库： : 社区：...
react-flow-chart：用于react的灵活，无状态，声明性流程图库
02-05
React流程图 Dragabble节点和画布 在端口之间创建弯曲的链接 画布，链接，端口，节点的自定义组件 React状态容器 更新选择/悬停节点，端口和链接上的状态 基本功能完成 稳定的NPM版本 滚动/捏画布进行缩放 Ctrl + z ...
react源码解析12.状态更新流程
js_2028的博客
02-28 142
例如B节点触发更新，B节点被被标记为normal的update，也就是图中的u1，然后向上遍历到根节点，在根节点上打上一个normal的update，如果此时B节点又触发了一个userBlocking的Update，同样会向上遍历到根节点，在根节点上打上一个userBlocking的update。优先级是由Scheduler来调度的，这里我们只关心状态计算时的优先级排序，也就是在函数processUpdateQueue中发生的计算，例如初始时有c1-c4四个update，其中c1和c3为高优先级。
在html中引入react,在网站中添加 React
weixin_39617497的博客
06-30 3490
根据需要选择性地使用 React。React 在设计之初就可以被渐进式适配，并且你可以根据需要选择性地使用 React。可能你只想在现有页面中“局部地添加交互性”。使用 React 组件是一种不错的方式。大多数网站不是、也不需要是单页应用程序。通过仅仅几行代码并且无需使用构建工具，试试在你的网站的一小部分中使用 React。然后，你可以逐步扩展它的存在，或只将其涵盖在少数动态部件中。一分钟用上 R...
React的更新
qq_47872824的博客
01-28 985
react之中新旧树对比，以及相关性能的优化
react-节点更新与销毁
yuey0809的博客
08-05 1722
相同的节点类型: 节点本身类型相同(不管属性,虚拟DOM树更新前后节点都为div则相同,前为div后为p则不相同),如果是react元素则要求type值必须一致。key值的作用: 用于通过旧节点,寻找对应的新节点,如果某个旧节点由key值,则其更新时,会在相同层级中找相同的key值进行对比。将心产生的节点,对比之前虚拟DOM树中的节点,发现差异,完成更新。: 直接放弃该节点,如果节点有子节点,递归卸载节点。4. 运行render,得到新的节点对象,进行。: 重新调用函数,得到一个新的节点对象,进行。...
React从入门到精通系列之(19)彻底理解React如何重新处理DOM(Diffing算法)
weixin_33924220的博客
12-16 210
十九、彻底理解React如何重新处理DOM(Diffing算法) React提供了一个声明式的API，所以你不必担心每次DOM更新时内部会修改哪些东西。虽然在React中并不是那么明显地告诉你具体如何实现的，不过这也让编写应用变得更加容易。 本文会详细解释在React中的“diffing”算法是怎么做的，以便组件更新是可预测的，从而让高性...
React-强制刷新（获取render后的内容）
热门推荐
麦子
05-31 1万+
React-强制刷新（获取render后的内容） setState 是不保证同步的，如果需要在 setState 后直接获取修改后的值，可以： 使用setTimeout componentWillReceiveProps(nextProps, nextContext) { this.setState({ caseDetail: nextProps.caseDetail ...
react追加html元素,react怎么动态添加dom
weixin_31230841的博客
06-02 4983
React 动态增加，删除，上下移动dom在react的世界里，都是状态变更(数据变更)来驱动dom变化，动态添加dom不像以前用jquery一样append一个或者一个 这样了，而是通过装载 或者 数据数组[]来动态添加dom，下面的例子实现使用了antd的组件库。最终我选择的是用添加/移除数组中的元素来实现的；addElement = () => {var arr = this.stat...
react 当中重新渲染dom的方法
weixin_30700099的博客
01-23 886
有个upload 重复上传同名文件的需求，在网上找了很多解决方案都不好使，在react当中解决该问题其实很简单，其实无法上传同名文件 的原因是因为无法触发onChange事件，只需要刷新改dom就可以清空file里面的文件路径了。 而react当中更新组件的Key就可以重新渲染该dom了 转载于:https://www.cnblogs.com/kugeliu/p/8336849.html...
使用react-router-dom时，手动刷新URL地址加载资源失败解决方法
ngd-b的博客
07-14 2780
解决使用react-router-dom 进行路由设置是的问题： 1. 前端手动刷新浏览器是路由报错404 的问题。 2. 部署后找不到路由的问题（给出了Node服务下的解决方式）
react显示bpmn流程图并且高亮当前节点的插件以及使用方法
05-26
可以使用 `bpmn-js` 库来显示 BPMN 流程图，并且结合 `bpmn-js-highlight` 插件来高亮当前节点。 首先，你需要安装 `bpmn-js` 和 `bpmn-js-highlight` 两个库： ``` npm install bpmn-js bpmn-js-highlight ``` 然后在你的 React 项目中引入它们： ```javascript import BpmnModeler from 'bpmn-js/lib/Modeler'; import BpmnViewer from 'bpmn-js/lib/Viewer'; import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'; import 'bpmn-js/dist/assets/diagram-js.css'; import 'bpmn-js-highlight/styles/highlight.css'; import bpmnHighlight from 'bpmn-js-highlight'; ``` 其中，`BpmnModeler` 是用于编辑 BPMN 流程图的组件，`BpmnViewer` 是用于显示 BPMN 流程图的组件。 接着在你的 React 组件中使用它们： ```javascript import React, { useEffect, useRef } from 'react'; const BpmnViewerComponent = ({ xml, activeElementId }) => { const containerRef = useRef(null); const viewerRef = useRef(null); useEffect(() => { if (containerRef.current) { viewerRef.current = new BpmnViewer({ container: containerRef.current, additionalModules: [ bpmnHighlight ] }); } }, []); useEffect(() => { if (viewerRef.current && xml) { viewerRef.current.importXML(xml, (err) => { if (err) { console.log('Error rendering BPMN', err); } else { const canvas = viewerRef.current.get('canvas'); const overlays = viewerRef.current.get('overlays'); canvas.zoom('fit-viewport'); if (activeElementId) { const element = viewerRef.current.get('elementRegistry').get(activeElementId); if (element) { overlays.add(activeElementId, 'highlight'); overlays.remove({ type: 'highlight', id: activeElementId }); } } } }); } }, [xml, activeElementId]); return ( <div className="bpmn-container" ref={containerRef}></div> ); }; ``` 其中，`xml` 是 BPMN 流程图的 XML 字符串，`activeElementId` 是要高亮的节点的 ID。 在 `useEffect` 中，我们初始化了 `BpmnViewer` 并且将其实例存储在 `viewerRef` 中。然后在第二个 `useEffect` 中，我们使用 `viewerRef.current.importXML` 方法来加载 BPMN 流程图，并且根据 `activeElementId` 高亮指定的节点。 最后，我们在组件中使用 `BpmnViewerComponent` 来显示 BPMN 流程图： ```jsx <BpmnViewerComponent xml={xml} activeElementId={activeElementId} /> ``` 其中，`xml` 和 `activeElementId` 是从组件的 props 中获取的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值