对 Rails 集成做出反应

Question

我希望通过 the gem react-rails 将 ReactJS 实现为我的 Rails 应用程序的视图。到目前为止，我只使用标准 .erb 在我的 RoR 应用程序中呈现我的视图，我想知道一些关于如何使用 React 来实现的问题。

例如，当您想在 RoR 中为模型创建表单时，您 "just" 使用以下方法创建表单：

<%= 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>
  );
}
});

React 没有像 Ruby 这样的 "auto-generating feature" 吗？

我在网上找到了一些关于 React 和 Rails（1, 2, 3) but most of the time they says different things. Some use JSX, some coffee, while the official React website recommend using JSX）教程的资源。有些使用 refs，其他使用 states，一切都是这样!

是否有很棒的教程可以作为使用 React 构建我的应用程序基础的参考？

Answer 1

简短的回答是，你在 JSX 中编写 React 组件，与在传统视图中编写的 DOM 元素分开。 React 需要完全控制它管理的 DOM 元素才能很好地工作，否则你会一直与它作斗争（尽管有限的使用可以成功，但它可能很脆弱）。

冒着我没有真正回答你想学什么的风险，这里有一些想法可能会有所帮助：

首先，意识到 ReactJS 还很年轻并且集成 Rails 更年轻：最佳实践仍在探索中并决定选择一种方法并制作它成功，因为它是关于选择一些最好的方式。
其次，关注点没有很好分离的混合技术通常难以以易于扩展的方式保持组织和管理。 ReactJS 是一种视图技术，因此如果您尝试以无组织的方式混合方法，分离您的视图机制会变得困难，特别是因为 ReactJS 如何处理 DOM management。此外，您正在处理两个不同生态系统的交叉点，因此支持较少。
您可能有三种主要方法：
- 最小 JS（以 JS 增强视图的经典方式使用 RoR，
- 以最小的 RoR 视图将大部分视图移动到 ReactJS 施工，以及
- 单独的服务层（使用 RoR 提供 API 对于 AJAX 与单独的 Web 服务一起使用，该服务呈现 UI 书面在 ReactJS 中（因此不将 ReactJS 直接集成到 Rails）
这些主题无疑有很多变体，但这些可能是主要的。

我只开发过几个执行此操作的应用程序，所以请对我的评论持保留态度。不过，对于新的应用程序，我倾向于使用单独的服务层方法，因为工具要简单得多。如果我有一个特别依赖 JS 的视图部分并且该功能是有界的，我倾向于只在现有应用程序中使用 ReactJS。

最小 ReactJS

在经典的 Rails 视图中，我们倾向于使用 JS 来增加客户端行为的视图：大部分视图计算是在服务器端完成的，然后我们让 JS 来操作 DOM 用于某些有针对性的目的。这对于 React 来说可能很困难，因为 React 负责其 DOM 的元素以保持状态更新。但是您仍然可以将 ReactJS 用于页面的元素，就像您可以在 Rails 中呈现局部视图一样，只要 "partial" 是有界的。

使用 React-Rails gem，只需让您的视图渲染一个 React 组件，就像您要使用部分组件一样，然后让该组件直接处理其组成元素，使用 AJAX 如果您在客户端使用期间需要来自服务器的更多信息，则调用。这会在您的视图中创建一个有限的、集中的关注点分离，您可以使用传统的 JS 技术收集其他页面 DOM 围绕您的组件的信息（尽管如果您做的不仅仅是非常有限的事情，这可能会变得困难和混乱这种形式 -- 如果你经常这样做，可能应该重新考虑）。

这种方法的主要优点是您可以开始将 ReactJS 引入现有应用程序，并开始迁移您认为有用的功能。对于某些客户端密集型的东西，比如一些具有大量客户端交互但边界明确的表单字段，这种技术可能是一个很好的选择。

ReactJS 浏览量来自 Rails

在这种方法中，我们可以使用 Rails 来呈现视图布局（即 HTML 包装器但没有内容），然后让特定的视图是 ReactJS-only 或更传统的ERB/Haml/Slim 观看次数。在这种方法中，Rails 视图只会为页面建立一个主要的 React 组件，然后在 ReactJS 中完成其余部分以在它自己的 JSX 中管理该部分（通常是整个内容窗格）。通过这种方式，您的 JSX 仍然由您的资产管道提供服务，但实际上您已经从 React 处理了页面的核心表示，并且仅使用 Rails 用于布局的最小目的并允许一些视图ReactJS-based 与其他人一样 Rails-based。

正如我所描述的，我宁愿假设一个多页面应用程序。如果您正在编写单页应用程序，这种技术可能只是以一种简单的方式使用 Rails 进行演示。

不过，还是有一些优点的：

同样，您可以为不同的页面混合和匹配技术，以此逐步将 ReactJS 引入应用程序；比如说，作为一种转换某些视图的方法，直到所有视图都基于 React。然后，如果您愿意，可以更轻松地转向单独的服务层方法。
您仍然可以使用视图在首次呈现时从控制器向 ReactJS 组件提供一些信息，因为您的视图仍将启动 React 组件。对于 React 处理其子组件后的任何其他信息，您仍然需要使用 AJAX（与任何其他 JS 功能没有什么不同）。
正如您指出的那样，Rails 仍在帮助您解决 CSRF 和那些应用程序范围的问题。

分离服务层

这种方法完全脱离了后端服务的观点。将您的 Rails 应用程序编写为完全 API 服务器渲染 JSON。所有核心逻辑仍然在控制器和模型中处理，因此设计的这一部分基本上完好无损。事实上，你不需要经典的 Rails。其他框架，例如 Grape 或 rails-api gem 可能更合适，因为它们更轻量级，因为您不会呈现任何视图或需要那些助手。

然后你编写一个单独的基于 ReactJS 的应用程序（记住 ReactJS 也可以是服务器端），它只专注于展示并且只使用你的 RoR API 服务来获取和 post 信息。

对这种方法的注意事项：

你得到了一个非常明确的关注点分离：你的 Rails （或其他）应用程序专注于 data/logic 层作为服务而你的 ReactJS 应用程序专注于表示。以这种方式更多地使用 Rails 是一种趋势，您可以通过另一种方式水平扩展您的应用程序。
工具更容易，因为两者更同质（单独的自动化测试更容易）。围绕 RoR 和 JS 和 ReactJS 应用程序建立了一个生态系统，但这些生态系统的交集要稀疏得多，因此您会发现自己在其他两种技术中更多地与工具作斗争。对于单独的图层，这不是问题。
适用于新应用程序，但转换现有应用程序可能要困难得多（您必须同时转换控制器和视图）。

祝你好运！

更新（2015 年 9 月 2 日） 您可能会发现此博客 post 很有启发性：http://www.openmindedinnovations.com/blogs/3-ways-to-integrate-ruby-on-rails-react-flux，作者 Blaine Hatab (3/2015)。 post 概述了三种方法，它们与我上面提供的高级概述有些相似，但旨在更完整地描述如何进行。他们列出的三种方法是

方法 1：在 Rails 内部使用 React 和 react-rails
方法二：React/Flux前端应用在Rails
方法三：分离RailsAPI和React/Flux前端应用

您可能会发现此描述更有用，他提供了参考以查看更多详细信息。

对 Rails 集成做出反应

React on Rails integration

javascript

ruby-on-rails

reactjs

react-rails