javascript - 对Rails集成使用react

Question

我正在寻找使用the gem react-rails实现ReactJS作为我的Rails应用程序的 View 。
到目前为止，我仅使用标准的.erb在我的RoR应用程序中呈现我的 View ，我想知道有关如何使用React进行处理的一些问题。

例如，当您想在RoR中为模型创建表单时，只需“使用”创建表单:

<%= form_for(@product) do |f| %>
  <%= f.text_field :name %>
  ...
  <%= f.submit %>
<% end %>

这会自动使用正确的路由，生成CSRF token ，使用正确的CSS id和 class等。

现在，如果我正在使用React，我必须照顾好所有这些吗？并以老式的方式在渲染器中的JSX中创建表单？

# My view .html.erb
<%= react_component 'Form', {} %>

# My js.jsx file
var Form = React.createClass({
render: function () {
  return (
    <form className="new_my_model" onSubmit={this.handleSubmit}>
      <input style={inputStyle} type="text" className="my_model_name" />
      ...
      <input type="submit" value="Post" />
    </form>
  );
}
});

没有像Ruby这样的“自动生成功能”？

我在网上找到了一些有关React＆Rails教程的资源( 1， 2， 3)，但是大多数时候他们会说不同的话。有些使用JSX，一些使用咖啡，而 official React website recommend using JSX。一些使用 refs，其他使用 states，一切都这样!

有没有很棒的教程可以用作使用React构建我的应用程序基础的引用？

Answer 1

简短的答案是，您用JSX编写了React组件，并与传统 View 中编写的DOM元素分开了。 React需要对它设法正常运行的DOM元素进行完全控制，否则您将全力以赴(尽管有限的使用可能会成功，但它可能很脆弱)。

冒着我没有真正回答您要学习的意思的风险，以下几点想法可能会有所帮助:

首先

，意识到ReactJS还很年轻并且已经集成
Rails更加年轻:最佳实践仍在被发现
并决定，因此，选择一种方法并使其成为现实
成功，因为这是选择最佳方法。

其次，通常很难以易于扩展的方式来组织和管理关注点分离不充分的混合技术。 ReactJS是一种 View 技术，因此，如果您尝试以无组织的方式混合方法，则分离 View 机制可能会变得困难，尤其是由于ReactJS如何处理DOM管理。另外，您正在使用两个不同的生态系统的交叉点，因此支持更薄。

您可能有三种主要方法:

最小JS(以JS增强 View 的经典方式使用RoR，

将您的大部分 View 以最小的RoR View 移至ReactJS
施工和

单独的服务层(使用RoR提供API
用于AJAX，并与单独的Web服务一起使用，该Web服务提供编写的UI
在ReactJS中(因此不要将ReactJS直接集成到Rails中)

这些主题无疑有很多变体，但是这些可能是主要的。

我仅使用了几个应用程序来完成此任务，因此请多加评论。不过，对于新应用程序，我倾向于单独的服务层方法，因为工具非常容易。如果我的 View 中有特别多的JS部分并且该功能有很好的界限，那么我倾向于仅在现有应用中使用ReactJS。

最小化ReactJS

在经典的Rails View 中，我们倾向于使用JS只是为了通过客户端行为来增强 View :大多数 View 计算是在服务器端完成的，然后我们让JS出于某些目标目的只是操纵DOM的各个方面。使用React可能会很难，因为React负责DOM元素以保持状态更新。但是您仍然可以将ReactJS用于页面的元素，就像只要在“局部”范围内，就可以在Rails中呈现局部 View 一样。

使用React-Rails gem，只需要让您的 View 呈现一个React组件就好像您要使用部分组件一样，然后让该组件直接处理其组成元素，如果您在客户端使用期间需要从服务器获取更多信息，可以使用AJAX调用。这会在您的 View 中造成有限，集中的关注点分离，并且您可以使用传统的JS技术来收集围绕组件的其他页面DOM信息(尽管如果您做的事情非常局限，则可能会变得困难而困惑- -如果您做了很多，可能应该重新考虑)。

这种方法的主要优点是，您可以开始将ReactJS引入现有应用程序中，并在发现有用的功能时开始迁移功能。对于某些客户端密集型的事情，例如一些具有大量客户端交互作用的表单域，但是范围很广，此技术可能是不错的选择。

来自Rails的ReactJS View

在这种方法中，我们可以使用Rails渲染 View 布局(即HTML包装器，但不包含内容)，然后让特定 View 成为仅ReactJS或更传统的ERB / Haml / Slim View 。在这种方法中，Rails View 将只为页面建立一个主要的React组件，然后在ReactJS中进行其余操作，以在其自己的JSX中管理该部分(通常是整个内容 Pane )。这样，您的JSX仍然可以从 Assets 管道中获取，但是实际上您已经处理了React的页面核心演示，并且仅将Rails用于最小的布局目的，并允许某些 View 基于ReactJS。其他基于Rails。

正如我所描述的，我宁愿使用多页应用程序。如果您正在编写单个页面的应用程序，则此技术可能仅以简单的方式使用Rails进行演示。

仍然有一些优点:

再次使用

，您可以混合和匹配不同页面的技术，以逐步将ReactJS引入应用程序；比如说，这是一种转换某些 View 直到所有 View 都基于React的方式。然后，如果需要，可以更轻松地转向单独的服务层方法。

您仍然可以使用 View 在首次呈现时从 Controller 向ReactJS组件提供一些信息，因为您的 View 仍将启动React组件。对于任何其他信息，一旦React处理了其子组件，您仍然需要使用AJAX(与其他JS功能实际上没有什么不同)。

正如您所指出的，

，Rails仍在帮助您解决CSRF和应用程序范围的问题。

单独的服务层

这种方法完全将后端服务与 View 分离。将Rails应用程序编写为完全呈现JSON的API服务器。所有核心逻辑仍在 Controller 和模型中处理，因此设计的大部分内容都完整无缺。实际上，您不需要传统的Rails。其他框架(例如Grape或rails-api gem)可能更适合，因为它们重量更轻，因为您无需渲染任何 View 或需要那些帮助程序。

然后，您编写一个单独的基于ReactJS的应用程序(记住ReactJS也可以在服务器端使用)，该应用程序仅专注于演示文稿，并且仅使用RoR API服务来获取和发布信息。

此方法的注意事项:

，您可以很清楚地将关注点分离:Rails(或其他)应用程序专注于作为服务的数据/逻辑层，而ReactJS应用程序专注于表示。有一种趋势是更多地使用Rails，而您又有了另一种水平扩展应用程序的方法。

工具要容易得多，因为两者的同质性更高(单独进行自动化测试要容易得多)。 RoR周围建立了一个生态系统，而JS和ReactJS应用程序周围有一个生态系统，但是这些生态系统的交叉点很少，因此您发现自己在其他两种技术中与工具进行了更多的对抗。对于单独的层，这不是问题。

对于新应用程序很好用，但是转换现有的应用程序可能要困难得多(您必须同时转换 Controller 和 View )。

祝好运!

更新(9/2/2015)
您可能会发现这篇博客文章具有启发性:Blaine Hatab(3/2015)的 http://www.openmindedinnovations.com/blogs/3-ways-to-integrate-ruby-on-rails-react-flux。这篇文章概述了三种方法，这些方法与我上面提供的高级概述有些相似，但旨在更全面地了解如何进行。他们列出的三种方法是

方法1:将Rails内部的React与react-rails一起使用

方法2:Rails内的React / Flux前端应用程序

方法3:分离的Rails API和React / Flux前端应用程序

您可能会发现此描述更有用，并且他提供了引用以查看其他详细信息。