问题标签 [virtual-dom]

当我使用 react 时，我发现这两个生命周期太相似了，componentWillReceiveProps 接收 nextProps 作为参数， shouldComponentUpdate 接收 nextProps 和 nextState 作为参数，所以我认为 shouldComponentUpdate 可以做同样的事情甚至更多，为什么 react 保持 componentWillReceiveProps 方法，我想知道是什么这两种方法的区别

过去，我构建了一个“单页应用程序”，除了使用 JQuery 进行常规 DOM 操作外，什么都不使用。

现在，我正在用 React-Redux 重写同一个应用程序。从我的旧 JQuery 应用程序重新创建某个页面后，我注意到一些令人不安的事情：React 做同样的事情，但慢得多。事实上，我会说它的速度大约是原来的两倍。

我开始优化我的组件，并确保它仅在必要时呈现。然而，重新渲染 HTML 的整个过程比较慢。

该组件的作用：我从服务器获取一个包含 150 个项目的数组。每个项目中可能有几个项目。所以，我的 JSX 有两个嵌套的 map() 函数：

我正在用 Jquery 做同样的事情。出于某种原因，直接 DOM 操作似乎工作得更快，至少在这种情况下是这样。

请注意，每次我获取新数据（我正在使用分页）时，所有数据都是不同的，因此 React 必须重新渲染所有 DOM 元素。但是，重新渲染虚拟 DOM，然后渲染 DOM 本身的整个过程，为什么实际上慢了两倍呢？

HTML：

JS：

我已将列表初始化为“一”和“二”。现在我使用 jquery 直接更新 DOM，并在 2 秒超时后将“一”的值更改为“三”。现在，通过单击按钮，我再次进入状态，重新渲染组件。

现在我的问题是，如果我直接将 DOM 从“一”更改为“三”，虚拟 DOM 应该仍然保持值“一”，所以下次如果我更改状态，它将根据浏览器 DOM 检查虚拟 DOM，并且应该使用虚拟 DOM 更新浏览器 DOM。在我的情况下，单击按钮后值“三”仍然存在，这是怎么回事？

我是虚拟 DOM 主题的新手，最近几天我一直在思考它应该如何工作。

假设我的项目中有一个简单的模板引擎，例如 twig。我使用 vue.js 作为 javascript 框架。所以我可以建立以下页面：

代码的哪一部分是虚拟 DOM：

• 一个。没有什么
• 湾。里面的一切#app
• C。Items和component
• d。仅有的component

为什么？如果与我分享任何信息（链接、您的想法、官方文档），那就太好了。

感谢你！

我在 setState 下方调用 console.log，但它显示我的空白数组，即使状态已更改。

我尝试根据我想做的变量类型返回html部分：</p>

我知道在react中我可以使用virtualDOM来做到这一点，我应该如何在Vue2.5.11中做类似的事情？

这不是一个故意广泛的问题，但我根本找不到如何做到这一点的好例子。

我试图弄清楚我如何在反应项目中的路线之间做一个百分比进度条。文档或窗口上是否有任何方法可以为您提供要下载的数据总量？然后以某种方式找到当前下载并将其除以总次数 100。

任何帮助弄清楚这一点将不胜感激。我不是在寻找可以做到这一点的软件包，只是大致了解如何做到这一点。

我正在为我的项目使用Ant Design和React js。

问题

我在 Popover 中有一个按钮，并且该按钮具有单击事件。问题是按钮单击事件未触发。

JS代码

stackblitz场景的完整代码

我在我的项目中使用React JS和Ant Design。

问题

我正在创建虚拟 DOM 元素。它有Popover在里面Button，然后点击那个显示Modal。

它显示错误Cannot read property 'setState' of undefined

JS代码

StackBlitz上的完整代码

我已经阅读了 10 篇关于 React 和 Virtual DOM 的文章。

我了解虚拟 DOM 使用差异算法并且仅更新已更改的 UI。但我仍然不明白为什么这比更新实际 DOM 更快。

下面是一个例子：

假设我们创建了一个组件并使用 React 对其进行了更改。假设我们将文本更改为Hello World!

我可以用普通的 JS 做同样的事情吗？document.getElementById('test').innerHTML = Hello World!

我的问题：

为什么反应更快？我觉得 React 在幕后做着完全相同的事情，对吧？

我觉得我在这里缺少一些基本的东西。