javascript - React真正解决的问题是什么？

Question

我知道这可能是一个经典问题，但我真的无法从任何人那里得到真正的答案，我寻求一个详细的示例或情况来证明 React 解决了一个真正的问题。我理解可重用性、声明式风格的部分，但仍然迷失在 React 网站总是讲述 React “我们构建 React 来解决一个问题:用数据构建大型应用程序”随着时间的推移而改变。”

React Podcast4 上的讨论提到 React 的创建者 Jordan Walke 正在解决 Facebook 的一个问题:拥有多个数据源更新自动完成字段。数据是异步从后面传来的结尾。确定在哪里插入新内容变得越来越复杂行以重用 DOM 元素。沃克决定生成现场代表每次都重新定义(DOM 元素)。该解决方案因其简单性而优雅:UI 为功能。用数据调用它们，您就会得到可预测的渲染 View 。

这很好，但仍然无法完全消化它，在其创建者心中创建 React 的真正问题是什么，

这到底是什么意思？

"It was becoming more and more complicated to determine where toinsert new rows in order to reuse DOM elements"

我无法完全理解这种情况，任何人都可以用或不用代码向我详细解释这种情况，从多个源异步获取数据并将其附加到 DOM 中的某个元素有什么问题？ ？

Answer 1

I couldn't fully understand that situation, can anyone explain in details this situation to me with or without code, what is the problem to get that data asynchronously from multiple sources and just append it to a certain element in the DOM??

假设我们有一个购物车:

<span class="total">1</span>
<ul class="products">
  <li class="product">
    Product 1
    <span class="quantity">2</span>
    <span class="price">10 EUR</span>
  </li>
</ul>

当我们将东西添加到购物车时，请求会发送到服务器。服务器执行一些验证和业务逻辑，然后将新购物车发送回客户端。

const addToCart = async (product) => {
  try ( 
    // send data and waits for a response
    // returns a array with objects 
    // eg: [{}, {}, ...]
  ) catch ( 
    ...
  )
}

// on some event:
  cart = addToCart({ product: 1, quantity: 5 })

在普通 JavaScript 中，我们现在需要更新大量 DOM 元素。

它可能看起来像:

const productsElm = document.querySelector(".products");
productsElm.innerHTML = '';

cart.forEach( (product) => {
  const product = document.createElement('li')
  const quanity = document.createElement('span')
  const price = document.createElement('span')
  product.innerHtml = product.name
  product.append(quanity)
  product.append(price)
  productsElm.append(pro)
} 

document.querySelector(".quantity").innerHtml = cart.length

在此示例中，我们清空购物车并使用从服务器收到的数据重建它

这已经很难扩展和维护。

现在假设我们从一个不断将更改从服务器发送到客户端的网络套接字获取响应，也许我们有几个带有链接购物车的网上商店。

首先是A店的产品，3秒后是B店的产品

我们现在运行中遇到的几个问题，例如:

• 我们无法再清除 DOM 元素，因为它现在是我们的状态。
• 我们无法附加它，因为可能会添加相同的产品，在这种情况下，我们应该只更新数量。

所以现在我们需要编写复杂的代码来更新购物车。

REACT 生态系统通过引入 Reactivity 解决了这个问题。到 JavaScript，因此我们作为开发人员不再需要担心更新 DOM 元素。