我知道这可能是一个经典的问题，但我真的无法从任何人那里得到真正的答案，我寻求一个详细的例子或一个情况来证明React解决了一个真正的问题。我理解可重用性，声明式风格的部分，但仍然迷失在React网站总是告诉React&;我们构建React是为了解决一个问题:构建具有数据的大型应用程序
React Podcast4上的一个讨论提到，React的创建者jordan walker正在解决Facebook的一个问题:拥有多个数据源更新自动完成字段。数据异步地来自后台结束。确定在哪里插入新代码变得越来越复杂行，以便重用DOM元素。沃克决定产生现场代表元素(DOM元素)每次都重新生成。这个解决方案是其简单性:优雅的ui功能。用数据调用它们，你可以得到可预测的渲染视图。
这很好，但仍然不能完全消化它，什么是真正的问题，在它的创造者的头脑中创建React，
这到底是什么意思?
"决定去哪里变得越来越复杂了插入新行以重用DOM元素">
我不能完全理解这种情况，有没有人可以详细解释这种情况给我有或没有代码，从多个来源异步获取数据的问题是什么，只是把它附加到DOM中的某个元素?
我无法完全理解这种情况，有没有人可以详细解释这种情况给我有或没有代码，从多个来源异步获取数据的问题是什么，只是将其附加到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
在本例中，我们清空购物车并使用从服务器
收到的数据重新构建它这已经很难扩展和维护了。
让我们现在说，我们得到我们的响应从一个web套接字，不断地发送变化从服务器到客户端，也许我们有几个网络商店与链接购物车。
先从A店进货，3秒后从B店进货
我们现在运行几个问题，例如:
- 我们不能再清除DOM元素，因为它现在是我们的状态。
- 我们不能添加它，因为有可能添加了相同的产品，在这种情况下，我们应该只更新数量。
所以现在我们需要编写复杂的代码来更新购物车。
REACT生态系统通过将响应性引入JavaScript解决了这个问题，因此我们作为开发人员不再需要担心更新DOM元素。