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

Question

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

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

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

Answer 1

以下只是我的意见。如果我需要更正

以下的内容，请纠正我

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

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

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

Answer 2

  

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

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

• 您在浏览器中点击了网址。浏览器要求服务器返回一些内容。
• 服务器返回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元素，并使用获取的数据。

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