在ReactJS中，服务器上采取了哪些步骤以及在呈现组件时在客户端上采取了哪些步骤？

Question

我是ReactJS的新手，虽然我遵循了几个非常好的教程，并且我阅读了文档的入门部分，但我没有理解ReactJS实际工作原理的基本原理。

在提供页面时，背后究竟发生了什么？ render部分中的代码是否在服务器上调用并返回结果？客户端是否以某种方式将生成的“虚拟”DOM与浏览器的DOM合并？在这种情况下，如何减轻浏览器兼容性。

我基本上是在寻找React页面请求的解剖。是否有任何资源可用于此部分？

Answer 1

以下只是我的意见。如果我需要更正以下内容，请纠正我

如果你不是在谈论服务器端渲染，那么只有第一个请求将转到服务器以获取所需的文件。所有必需的组件将以javascript文件的形式提供给客户端（除非您有延迟加载的组件）

因此，无论何时渲染组件，反应库（从初始请求捆绑）都将负责渲染组件，任何单击事件也由反应库处理。

假设您具有从服务器获取数据的功能。说按钮点击你需要获得员工列表，然后在组件中显示，你从你的组件进行ajax调用（除非你使用其他一些状态管理技术），然后用你的ajax的结果做一个setState（）呼叫。 setState（）是帮助更新组件状态的主要反应方法之一。此状态也可以发送给其子项，并使用子组件接收的道具进行渲染。实际DOM树与虚拟DOM的比较也在客户端本身非常智能地做出反应，并且只需要呈现变化的DOM节点。

Answer 2

在提供页面时，背后究竟发生了什么？

如果它不是服务器端呈现，通常的流程是这样的：

• 您在浏览器中点击了URL。浏览器要求服务器返回一些内容。
• 服务器返回html文件。在反应案例中，html文件应包含react应用程序在<script>标签内的包。通常看起来像

<script src="www.yourdomain.com/bundle.js"></script>

• 一旦浏览器收到此html，它就会开始执行此操作。它将再次要求服务器获取脚本标记中提到的react app bundle文件。
• 由于此html文件不包含任何要在浏览器上显示的内容，因此它将等待反应应用程序包。
• 一旦收到这个bundle（只是javascript），浏览器就会开始执行它。从这里开始，您的反应应用程序可以控制需要渲染的内容。因此无论从render函数返回应用程序的反应，都会在浏览器中显示。

Answer 3

诚实没有多少。

这是步骤。

1. 服务器负责提供具有空html元素的页面（通常是div＃app）
2. 服务器还负责提供数据以通过API响应应用程序，通常（总是）以JSON的形式。
3. 在客户端（浏览器）上，使用react API编写的JS脚本代码将所有内容（组件）呈现为上面提到的空html元素，并且还使用了获取的数据。

对于React本身的工作原理（虚拟DOM等）还有很多，但这只是一个标准的流程解释，希望你发现它是可以理解的。