每当我们换一个避孕套时,这个问题就会被问到更多次,比如

方法一:

.getElementByID(‘根’)="Hello";即使更改一个DOM元素,浏览器也会呈现整个DOM和其他元素的状态,如输入文本框将会丢失,并重新计算样式和布局(.ie重排和重新绘制) 到现在为止一切都很好.

方法二:

Reaction所做的是保持虚拟DOM,该虚拟DOM是真实DOM的副本,每当状态改变时,它在存储器中呈现整个新的VDOM,并且进行区分和识别哪些 node 将在真实DOM中更新,并且Reaction仅在真实DOM中更新该部分,从而节省了不重新呈现整个DOM的时间.

我的问题是,在一天结束的时候,要么我们使用方法1更新reality,要么使用vdom,最终DOM得到更新,这反过来应该使浏览器再次计算整个布局和样式,为什么人们说它只帮助更新部分UI?

**请不要回答相同的区分概念、VDOM概念、更新所需的部件概念,或重绘和回流过程,即DOM树、CSS树和渲染引擎等...**

# My question is how vdom can stop browser repainting and reflowing when ultimately dom is getting updated which in turn makes reflow and repaint whole tree?

关于我想问的问题的图片:

enter image description here

忽略我的语法,当我在don、vdon、reaint和reflow等概念上出错时,请纠正我.

推荐答案

与编写良好的DOM操作相比,VDOM通常不会为您节省任何重绘/回流.

它的主要好处是它允许声明性组件API.您描述了组件是什么,Reaction了解了如何在不重新生成无关的DOM元素的情况下高效地呈现它.使用该方法,通常将较小地改变HTML.

这里的性能优势在某种程度上是转移注意力.是的,REACTS VDOM有批处理渲染等优化,但这些是针对VDOM的优化,而不是针对浏览器的优化.浏览器DOM操作已经非常快了.

Reactjs相关问答推荐

条件索引路由

当useEffect和onClick处理程序都调用useCallback函数时,有没有办法对useEffect产生额外的影响?

折叠并重新打开react 手风琴将重置内部状态

安装使用环境的BIT组件的依赖项

使用以Jest 的方式返回 Promise 的方法来模拟可构造的 API 类时出现问题

当从子状态更改复制时,react 父状态更改.我该如何防止这种情况?

React useContext 的未定义返回值

将 useRef 与 useImperativeHandle 一起使用时,React 不会重新渲染

无法通过react 路由中的链接传递信息

CORS策略:对预检请求的响应未通过访问控制判断:没有Access-Control-Allow-Origin

如何修改 react/jsx-no-useless-fragment 规则以允许 <>{children}

将水平滚动视图添加到底部导航选项卡

Primereact 的日历组件在每个月 12 日之后使用非唯一键生成

基于标记名的博客详细信息分组没有发生

使用 React Router v6 监听来自不同组件的组件状态变化

vdom 最终更新了 dom(在比较之后)任何 dom 更改实际上应该触发整个树的重绘和回流,那么 vdom 有什么用?

ReactJS:按钮启用禁用更改 colored颜色

如何将本地视频文件上传到 Google Cloud

在状态中存储多个选定的选项

由于另一个子组件,如何在react 中渲染另一个子组件