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

时间:2016-03-14 12:15:37

标签: php laravel reactjs

来自非JS的html解释,我很难理解将服务器端数据加载到REACT.JS" view"。

我们说我在Laravel上建立了一个网站(使用路线)。每个路径请求(例如" /"," contact")都有自己的视图。该视图加载了来自控制器并显示在视图中的数据。如果我改变路线,我将被重定向到另一个视图,我将从不同的控制器获得不同的数据。

现在的问题。我们说我有一个简单的网站。顶部是我的登录信息,也可能是一些通知图标,页面内容会随着网页的不同部分而变化。

所以如果我继续使用Laravel路线。每个页面都将被重新呈现" +我必须手动选择属于该网站部分的组件。我必须再次检索整个网络上保持不变的信息(例如登录详细信息+通知) - 这会导致react.js原则无法解决吗?

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

我是否可以指出如何将React.js与PHP一起使用的一些有意义的方法。

1 个答案:

答案 0 :(得分:3)

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

如果您的应用程序提供了一些复杂的客户端代码,那么将此代码构建为React组件可能会很有用,即使您保留当前的服务器端路由器:使代码更易于维护,也可以编写代码 - 曾熟悉React的实施方式。

如果您希望将应用程序转换为完全使用React和客户端路由器,以便在不重新呈现每个页面的情况下浏览应用程序,则称为SPA(单页应用程序)。反应生态系统非常适合构建SPA。但是,通常,服务器只是一个提供JS文件的静态服务器,应用程序连接到某种REST API。

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

  • 第一页的显示速度更快
  • 社交图标签可以添加到特定页面(以启用可用的Facebook 或者Twitter股票,例如)

如果您需要启用此服务器端路由,这会使您的应用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)。

回顾:

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