Javascript react代码（noob）旁边的jQuery代码示例

我并没有仔细考虑过他们的反应，但我可以看到很多公司都需要它来与他们共事。在过去的12年中，我只使用过html/css，在过去的几年中，我使用过js（主要是jQuery，但也使用香草和es6）。我想知道是否有人能给我展示一些简单代码的示例，这些代码可以在jQuery和React中使用

在接下来的一年中，我将深入研究React，但我只想看到两个不同库实现相同结果的示例比较。因为我不完全理解React做什么，这是可能的还是它们都提供了做完全不同事情的选项？考虑到React如此受欢迎，我想您可以用jQuery做同样的事情，这样假设对吗

我还读到jQuery操作DOm，react使用虚拟DOm。我说的对吗，这意味着jQuery将影响html中存在的内容，并且其目的是向DOM中插入元素？如果这是正确的，那么使用react而不是使用jQuery的append方法有什么好处

在过去的一年里，我只正确地研究了JavaScript，这是我应该知道的吗？我问的问题是否荒谬/明显？我只是想获得更好的理解，并最终建立一个职业生涯，做我大部分业余时间在工作之外做的事情

---

如果您已经阅读了，谢谢您。

示例：假设有一个电子商务站点，用户单击

添加到购物车

按钮，产品就会添加到他们的购物车中。顶部导航栏上的购物车图标应显示购物车中的商品数量

Jquery代码看起来像这样：

var items_in_cart = 0;

$('#add-to-cart-button').on('click', function() {
    // first update the state variable
    items_in_cart++;

    // now update the DOM element
    $('#cart-items-icon').html(items_in_cart);
});

正如您所看到的，您正在维护状态，并且自己更新DOM

但是在React中，您只需更改

items\u in\u cart

变量，React就会自动更新DOM

这是一个非常简单的示例，并没有真正显示这种方法的优点。但如果多个组件依赖于某个特定的状态，则React开始发光。类似于复杂表单，其中某些字段根据复选框或单页应用程序的值启用和禁用