Question

我刚开始学习ReactJS。之前我的所有项目都使用过jQuery和Javascript，经过教程后对ReactJS几乎没有怀疑。

为什么我需要ReactJS，仍然有jQuery来更新DOM和把手，灰尘可以处理模板。
有一个概念Virtual DOM，在教程中，我可以看到它将需要我的DOM副本和更新。任何人都可以解释一下正常DOM操作的不同之处。
在React中，所有事件处理程序都是内联的，<input onClick={this.eventSample} />是否值得推荐？

我刚刚开始学习，如果有人用一些实际的代码示例清除了我的疑惑。对我来说，继续进行React会很有帮助。

提前致谢。

Answer 1

根据我的理解，我会解释为了让你明白：

以列表时间为例：

如果其中一个列表项更新，则DOM将重新呈现整个列表。这是DOM效率低下的原因。
理想情况下，我们只想重新呈现接收更新的项目，其余项目保持原样。

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

普通DOM操作：

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

React的虚拟DOM：

组件负责在发生更新时收听。
由于数据保存在状态中，因此组件可以只监听状态中的事件，如果有更新，则可以重新呈现到UI。
DOM的轻量级抽象。您可以将其视为DOM的副本，可以在不影响实际DOM的情况下进行更新。
实际上，每次重新渲染后都会创建一个新的虚拟DOM。
当为虚拟DOM提供更新时，React使用称为协调的过程 - 使用“差异”算法比较/对比更改，以便了解发生了哪些更新。
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解决了两个完全不同的问题。

jQuery直接与DOM交互。
这个想法是DOM元素带来了太多不必要的数据，虚拟DOM抽象了相关的部分，从而实现了更快的性能。
在React中，您修改虚拟DOM，然后将其与现有DOM元素进行比较并进行必要的更改/更新。

内联活动：

我可以理解为什么你这么说，在HTML DOM中你使用内联事件作为“不良做法”。

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

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

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

希望我尽可能地清除你的怀疑

什么是Virtual DOM和其他一些React Doubts

1 个答案: