将数据加载到 REACT.JS 的原理


Principle of loading data to REACT.JS

来自非 JS html 解释,我很难掌握将服务器端数据加载到 REACT.JS"视图"的概念。

假设我有一个在Laravel上构建的网站(使用路线)。每个路由请求(例如 "/","联系人")有自己的观点。该视图加载来自控制器的数据并显示在视图中。如果我更改路由,我将被重定向到另一个视图,并且我将从不同的控制器获取不同的数据。

现在问题来了。假设我有一个简单的网站。顶部是我的登录信息,也许还有一些通知图标,页面内容会随着转到网络的不同部分而变化。

所以如果我继续使用拉拉维尔路线。每个页面都将被"重新渲染"+我必须手动选择哪些组件属于网站的该部分。我将不得不再次从整个网络中检索保持不变的信息(例如登录详细信息+通知) - 这会杀死反应.js原则不是吗?

另外,将服务器站点数据传播到 React.JS 的最佳方法是什么?我应该只是将 JSON 对象"回显"到视图,然后在 REACT 中"使用"它吗?

我可以指出一些关于如何使用 React 和 PHP 的有意义的方法.js

你主要回答了你的问题:-)使用 Laravel,UI 呈现在服务器上。React 对客户端 UI 最感兴趣。也就是说,并非所有事情都可以在服务器上完成,某些用户交互只能由浏览器管理。这就是为什么jQuery除了PHP之外也变得如此成功的原因。

如果你的应用提供了一些复杂的客户端代码,那么即使你保留了当前的服务器端路由器,将这些代码构建为 React 组件也是有用的:使代码更容易维护,但也更容易编写 - 一旦熟悉 React 实现事物的方式。

如果你想转换你的应用程序以完全使用 React 和客户端路由器,这样就可以浏览应用程序而无需在每个页面上重新渲染,这称为SPA(单页应用程序)。反应生态系统对于构建SPA来说非常酷。但是,通常,服务器只是一个传递JS文件的静态服务器,并且该应用程序连接到某种类型的REST API。

在某些情况下,还可以出于特定目的从服务器提供路由:

  • 更快地显示首页
  • 社交图谱标签可以添加到特定页面(以启用可用的Facebook或推特分享,例如)

如果您需要启用此服务器端路由,这会使您的应用程序universalisomorphic,您必须使用浏览器和服务器都可以理解的组件,这就是为什么 React 应用程序通常由 Node.js 提供服务,所以一切都在 Javascript 中。

关于使用 React https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#.h8p6lc23w 构建通用应用程序的示例教程(在这种情况下,您的直觉是正确的,在首次渲染时发送具有应用程序当前数据的 JSON 对象)

另请查看很棒的 react 页面 (https://github.com/enaqx/awesome-react) 如果你对 React 生态系统感兴趣。

回顾:

  • PHP + React:轻松地将复杂的组件添加到某些页面,如果您只有一个页面上有很多静态内容、SEO 和几个复杂的组件,React 可以帮助您,那么最好保持这种状态。
  • React + API:常见的SPA应用程序,更适合丰富而复杂的UI,如果从头开始并且熟悉javascript,则很容易开发,但是大型应用程序的性能管理和SEO会带来复杂性
  • 通用反应:两全其美,设置有点复杂(参见教程)