从传统的 Laravel/Rails 应用迁移到 React.js 生态系统。需要在前端进行数据管理

Posted 2023-02-22

【中文标题】从传统的 Laravel/Rails 应用迁移到 React.js 生态系统。需要在前端进行数据管理

【英文标题】：Migrating to React.js ecosystem from traditional Laravel/Rails app. Need data management on the front-end

【发布时间】：2015-10-16 06:37:03

【问题描述】：

我有一个处于开发阶段的 Laravel 应用程序；在这一点上，它并没有被其他人依赖。我一直在重新设计前端以尽可能多地使用 React.js。我遇到了一个问题，因为需要将数据传递给 React 以便可以对其进行操作。这是一个让我重新思考应该如何将数据从后端传递到前端的问题类型示例：

Laravel 提供了一种显示路由链接的便捷方式：

link_to_route('users.show', $user->present()->name(), $user->id);

该代码生成以下链接：

<a href="http://example.com/users/1">Jane Austin</a>

我的想法是这种功能（为命名路由生成链接）最好由后端处理。然而，正如我提到的，我开始为我的视图实现 React.js 框架。我开始使用的组件之一是Griddle。

首先，我设置了一个 Laravel 控制器来处理 ajax 调用：

class AjaxController extends Controller

    public function usersIndex()
    
        $users = Users::orderBy('last')->get();

        foreach ($users as $user) 
            $user->displayLink = link_to_route('users.show', $user->present()->name(), $user->id);
            $user->setVisible(['displayLink']);
        

        return $users->toJson();
    

当 Griddle 组件从 AjaxController@usersIndex 调用数据时，会返回一个 JSON 对象：

[
    
    "displayLink": "<a href=\"http://example.com/users/8\">Prof. Candelario Q. Abshire</a>"
    ,
    
    "displayLink": "<a href=\"http://example.com/users/3\">Prof. Danielle O. Altenwerth IV</a>"
    ,
    
    "displayLink": "<a href=\"http://example.com/users/18\">Chelsey J. Bahringer</a>"
    ,
]

现在，因为我从后端返回 html 而不是原始数据，所以我必须通过自定义组件运行 JSON 以设置内部 HTML：

var React = require('react');

var DangerouslySetInnerHTML = React.createClass(
    render: function () 
        return (
            <div dangerouslySetInnerHTML=__html: this.props.data></div>
        );
    
);

module.exports = DangerouslySetInnerHTML;

乍一看，这一切似乎都运行良好。但是，当 Griddle 组件去过滤表格或对列进行排序时，它不能，因为它只能过滤/排序整个链接字符串，而不仅仅是链接中显示的字符串。

所以现在显然我知道我做错了。我不知道我是否需要重写很多后端函数（演示者等）并将它们以某种方式放在前端，或者我是否需要一些东西来管理前端的数据以便我可以结合原始来自数据库的数据并编译链接等。一件很清楚的事情是 React.js 组件在将原始数据组合成更大的单元（如链接或全名）之前需要访问原始数据。我想 Laravel 基本上将被降级为提供与数据库中的内容密切相关的原始 JSON 对象，然后我将需要编写大量 React.js 组件来替换 Laravel 演示者和路由器负责的功能，例如，将小数据组合成更大的东西，比如链接全名等。我不知道是否有什么东西可以帮助管理它，因为我认为 Eloquent 纯粹通过 JSON 处理的复杂关系查询很困难。

我对此的想法完全错误吗？ 前端有没有类似 Eloquent 的东西？换句话说，是否有框架可以在前端管理原始数据，以便您可以像使用 Laravel/Rails 后端一样查询关系？ 将 Laravel 换成 Express.js 之类的 Node.js 后端或 Keystone.js 之类的框架除了能够重用代码的明显优势（因为它都是 javascript 的事实）之外，还有其他优势吗？ 如果我打算尽可能多地使用 React 来处理，有哪些补充工具可以帮助我将 Laravel 当前正在处理的功能迁移到 React.js 生态系统/环境？

【参考方案1】：

我知道这是一个复杂的领域，目前正在不断变化。很久没有答案了，所以我整理了一个自提出这个问题以来我发现的资源列表。

首先，Relay 刚刚由 Facebook 团队发布，该框架基本上解决了我一直试图解决的问题。

https://facebook.github.io/relay/

其次，我发现 2015 年 React.js 大会的视频非常有助于帮助我开始以不同的方式思考管理我的数据。

http://conf.reactjs.com/schedule.html#data-fetching-for-react-applications-at-facebook

特别是这个介绍 Relay 的视频很有见地。

http://conf.reactjs.com/schedule.html#data-fetching-for-react-applications-at-facebook

另外，Ryan Florence 的这次演讲是正确的，关于如何在 React 中重写应用程序：

https://www.youtube.com/watch?v=BF58ZJ1ZQxY

回答我自己的问题：

不，这个想法没有错。许多数据管理正在从使用 Laravel 和 Rails 等框架的后端转移到使用 React/Relay 等框架的前端。这是一个粗略的过渡和不同的思维方式。后端框架仍然可以处理关系查询，但应该提供由前端管理的 json/graphql。至于与 React 互补的工具，除了 Relay 和 Dan Abramov (https://www.youtube.com/watch?v=xsSnOQynTHs) 的出色开发工具之外，还有很多选择。此处提供了补充工具列表https://github.com/facebook/react/wiki/Complementary-Tools。