浏览器如何知道何时重新加载以及何时在单页应用程序中调用 javascript 代码？

Question

我正在学习 React，并且对单页应用程序等概念还很陌生。

所以我从单页应用程序教程中了解到的是，只有所需的数据从服务器发送，我们的异步代码仅更新该部分，确保应用程序的其余部分与用户同步，从而保持交互性。

服务器发送数据->浏览器接收它->现在，会发生什么 1) 想象服务器发送了完整的 html、css 信息....然后浏览器重新加载整个页面，这降低了交互性.. 2) 服务器刚刚发送了数据由react框架（spa）请求，现在浏览器收到该数据后，如何知道调用react框架将更新dom的功能交给react。

Answer 1

请阅读https://stackoverflow.com/help/how-to-ask。

这是互联网，人们可能会不友善，尤其是在一个明确用于提问的平台上。

回答你的问题：

浏览器如何知道它是否是浏览器应该重新渲染整个 UI 的响应，以及它如何知道何时应该将该响应发送到 ajax/异步代码以仅更新 UI 的某些部分。

1. React 根据其内部状态知道何时应该改变。请阅读 https://reactjs.org/docs/state-and-lifecycle.html 了解更多信息。
2. 使用 React 时，您可以运行诸如

   fetch

   之类的东西，等待它，并做所有有趣的事情。当数据传入时，React 具有可用于任何组件的本机状态管理。大多数情况下，设置此状态将导致组件重新渲染。因此，所获取的数据可以（由状态）获知并放入 UI 中。所有这些都发生在 React 框架内，而不是原生 HTML。

如何区分？你能解释一下它是如何区分的吗？它如何知道是否应该完全重新加载或只是更新而不重新加载，如果更新而不重新加载 - 那么浏览器会执行什么过程？

3. 这就是 React 的美妙之处。你不需要知道！ React 在内部将检查哪些特定组件依赖于哪些状态。想象一下，我的页面上显示了 2 个列表，它们都有自己的状态，我更新了一个列表。 React 只知道一种状态发生了变化，因此它只会使发生变化的列表重新渲染。

React 很强大。请在来 stackoverflow 询问之前阅读更多文档，这应该是最后的手段！

https://reactjs.org/docs/getting-started.html

Answer 2

浏览器不知道何时重新加载或更新 DOM。 React 确实如此。

React 负责在需要时重新加载 DOM 元素，例如当其组件接收新数据时。 当我们有一个纯单页面应用程序时（因此名称 - 页面不会改变），整个页面不会被重新加载，只有页面的某些元素会被重新加载。

React 通过保留自己的虚拟 DOM 并在需要时更新“真实”DOM 来实现这一点，请参阅 here 和 here 了解更多详细信息。 如果重新加载整个页面（虽然您期望它是 React 应用程序），通常会通过某些 JS 代码明确指示浏览器执行此操作，但很可能不会作为标准 React 应用程序工作流程的一部分。