javascript - 反应代码旁边的 jQuery 代码示例（菜鸟）

Question

我对 React 的研究不多，但可以看到很多公司都需要它来与他们合作。在过去的 12 年中只使用过 html/css，在过去的几年中只使用过 js（主要是 jQuery，但也有 vanilla 和 es6）。我想知道是否有人可以向我展示一些可以在 jQuery 和 React 中使用的简单代码示例。

在接下来的一年里，我将继续研究 React，但我只想看到两个不同库实现相同结果的示例比较。由于我不完全理解 React 的作用，这是可能的，还是它们都提供了做完全不同的事情的选项？鉴于 React 如此受追捧，我想你可以用 jQuery 做同样的事情，这样假设是否正确？

我还读到 jQuery 操作 DOM 并使用虚拟 DOM 做出反应。我是否正确地说这意味着 jQuery 会影响 html 中存在的内容，而 Reacts 的目的是将元素插入 DOM 中？如果这是正确的，那么使用 react 而不是使用 jQuery 的 append 方法这样做有什么好处？

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

谢谢你读到这里。

标签： javascriptjqueryreactjsfrontend

Answer 1

示例：假设有一个电子商务网站，用户单击Add to cart按钮并将产品添加到他们的购物车中。顶部导航上的购物车图标应显示购物车中的商品数量。

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_in_cart变量，React 就会自动更新 DOM。

这是一个非常简单的例子，并没有真正展示这种方法的优点。但是，如果多个组件依赖于一个特定的状态，那就是 React 开始大放异彩的地方。就像一个复杂的表单，其中某些字段根据复选框或单页应用程序的值启用和禁用。