Reactjs 什么是虚拟DOM和其他一些问题

我刚开始学英语。我以前在所有项目中都使用了jQuery和Javascript，在完成教程之后，我对ReactJS没有什么疑问

为什么我需要ReactJS，jQuery仍然是用来更新DOM和handlebar的，dust是用来处理模板的

有一个概念是虚拟DOM，在教程中我可以看到它将复制我的DOM并只需要更新。任何人请解释一下它与普通DOM操作的区别

在React中，所有事件处理程序都是内联的，

建议这样做吗

我刚刚开始学习，如果有人用一些实用的代码示例来澄清这些疑问的话。这将有助于我进一步作出反应

---

提前感谢。

根据我的理解，我解释是为了让您理解：

以列表时间为例：

如果其中一个列表项更新，则DOM将重新呈现整个列表。这就是DOM效率低下的原因

理想情况下，我们希望只重新渲染接收更新的项目，而保留其余项目的原样

React对虚拟DOM的使用有助于降低这种低效率

正常DOM操作：

定期检查所有节点的数据，以查看是否有任何更改

这是低效的，因为它需要递归地遍历每个节点

React的虚拟DOM:

组件负责在更新发生时侦听

由于数据保存在状态上，组件可以简单地侦听状态上的事件，如果有更新，它可以重新呈现到UI

DOM的轻量级抽象。您可以将其视为DOM的副本，可以在不影响实际DOM的情况下进行更新

事实上，每次重新渲染后都会创建一个新的虚拟DOM

向虚拟DOM提供更新时，React使用一个称为协调的过程 — 使用比较/对比更改的“差异化”算法，以了解发生了哪些更新

然后，React只更新已更改的元素，而不更新未更改的元素

我希望这有助于阐明React使用虚拟DOM的效率优势

更多

反应，它不仅仅是一个模板引擎。 因此，JSX比模板引擎更广泛。 希望您知道模板引擎是如何工作的。比较如下：

JSX/JS:      javascript -> vdom
Template:    string -> javascript -> vdom

// File 1 - templates/progress.html
<div class="progress-container">
  <div class="progress-bar" data-style="width: $val"></div>
</div>

JSX/JS:javascript->vdom
模板：字符串->javascript->vdom
//文件1-模板/progress.html

如果您分别查看模板代码和组件，如何知道$val来自何处

// File 1 -- progress
const (val) => (
  <div class="progress-container">
    <div class="progress-bar" style={{width: val}}></div>
  </div>
);

//文件1——进度
常数（val）=>(
);

在本例中，val的位置非常清楚

更多

JQuery和React解决了两个完全不同的问题

jQuery直接与DOM交互

其思想是DOM元素携带了太多不必要的数据，而虚拟DOM抽象了相关部分，从而实现了更快的性能

在React中，修改虚拟DOM，然后将其与现有DOM元素进行比较，并进行必要的更改/更新

内联事件：

我可以理解你为什么问这个问题，在HTMLDOM中，你使用内联事件作为“坏习惯”

这里，在React With JSX中，您将传递一个函数作为事件处理程序，而不是字符串

使用React时，通常不需要在DOM元素创建后调用addEventListener将侦听器添加到DOM元素中

相反，只需在元素最初呈现时提供一个侦听器。 这实际上是一个专业的反应

希望我能尽可能消除你的疑虑