什么是 Virtual DOM 以及其他一些 React 疑问

Question

我刚开始学习 ReactJS。我之前在所有项目中都使用过 jQuery 和 Javascript，在完成教程之后，我对 ReactJS 有了一些疑问。

1. 为什么我需要 ReactJS，仍然有 jQuery 来更新 DOM 和车把，还有灰尘来处理模板。

2. 有一个概念虚拟 DOM，在教程中我可以看到它会复制我的 DOM 并且只需要更新。请任何人解释它与正常的 DOM 操作有何不同。

3. 在 React 中，所有事件处理程序都是内联的，<input onClick={this.eventSample} /> 这值得推荐吗？

我刚开始学习，如果有人用一些实际的代码示例来解决我这些疑问。这对我在 React 中进一步发展会有所帮助。

提前致谢。

Answer 1

根据我的理解，我正在解释以使您理解：

以列表时间为例：

1. 如果这些列表项之一更新，则 DOM 会重新渲染整个列表。这就是 DOM 效率低下的原因。

2. 理想情况下，我们只想重新渲染接收更新的项目，其余项目保持原样。

React 使用 Virtual DOM 有助于减少这种低效率。

普通 DOM 操作：

1. 定期检查所有节点的数据，看看是否有任何变化。
2. 这是低效的，因为它需要递归遍历每个节点。

React 的虚拟 DOM：

1. 组件负责监听更新发生的时间。
2. 由于数据保存在状态上，组件可以简单地监听状态上的事件，如果有更新，它可以重新渲染到 UI。
3. DOM 的轻量级抽象。您可以将其视为 DOM 的副本，可以在不影响实际 DOM 的情况下对其进行更新。
4. 实际上，每次重新渲染后都会创建一个新的虚拟 DOM。
5. 当向 Virtual DOM 提供更新时，React 使用一个称为协调的过程 — 使用“差异”算法比较/对比更改以了解发生了哪些更新。
6. 然后，React 只更新那些已更改的元素，而保留未更改的元素。

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

更多Why is React's concept of Virtual DOM said to be more performant than dirty model checking?

React，它不仅仅是一个模板引擎。 因此，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>

如果你分别看模板代码和组件，你怎么知道 $val 来自哪里？

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

在这个例子中，很清楚 val 来自哪里

更多https://stackoverflow.com/questions/32619168/react-engine-vs-other-template-engines

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

1. jQuery 直接与 DOM 交互。

2. 这个想法是 DOM 元素携带了太多不必要的数据，而虚拟 DOM 抽象了相关部分，从而提高了性能。

3. 在 React 中，您修改虚拟 DOM，然后它与现有 DOM 元素进行比较并进行必要的更改/更新。

   内联事件：

我能理解你为什么问这个问题，在 HTML DOM 中你使用内联事件作为“不好的做法”。

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

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

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

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