问题标签 [isomorphic-javascript]

我想我在概念上缺少使用 React.js 进行服务器端渲染的东西

假设我想创建一个页面来显示来自服务器端数据库的项目，并带有一个输入字段来过滤它们。

我想要一个页面：

• 响应像这样的 URL/items?name=foobar
• 使用 React 输入字段按名称过滤项目
• 使用 React 组件显示过滤项目列表

假设我有一个公共 REST API 来查询客户端的项目。

从概念上讲，我想在第一次请求（GET /items?name=foobar）时做的是：

• 我希望我的输入字段显示用户作为参数传递的内容，因此我需要将查询参数（'foobar'）作为'prop'（如initialName）传递给反应组件

所以我尝试了这个：

• 我还必须在服务器上进行数据库查询以获取项目列表，并将此项目列表作为 ItemList 的“prop”（如“initialItems”）传递

据我了解，我需要一个简单的组件来显示列表，并将其作为“道具”接收：

• 现在，我需要一个组件来显示整个 Page ；该组件将不得不维护整个页面的状态，即查看字段中输入的名称，并进行 API 查询以更新列表项。但是我不明白这个组件如何具有一个“initialState”，它既可以在服务器端工作，也可以在以后在客户端呈现。

我试过这个：

这就是我卡住的地方。我可以使用类似的东西在服务器端渲染东西：

但是当我尝试编写客户端javascript时，我该怎么办？我知道我希望在哪里渲染我的 dom，但是我应该将哪些初始道具传递给 react 组件？

我尝试过的大多数尝试都以 DOM 在客户端被“擦除”而告终，并带有以下消息：

React 尝试在容器中使用重用标记，但校验和无效。这通常意味着您正在使用服务器渲染，并且在服务器上生成的标记不是客户端所期望的。React 注入了新的标记来补偿哪些工作，但是您已经失去了服务器渲染的许多好处。相反，要弄清楚为什么生成的标记在客户端或服务器上是不同的。

请注意，仅删除了我的 ItemList 组件的标记，所以我认为这是我的组件的实现问题，但我真的不知道从哪里开始。

我在正确的轨道上吗？还是我完全错过了什么？

使用同构应用程序设置应用程序初始状态的一般做法是什么？如果没有 Flux，我会简单地使用类似的东西：

然后通过express-handlebars渲染该标记并通过{{{reactMarkup}}.

在客户端设置初始状态我会做这样的事情：

所以是的，基本上你在服务器和客户端设置了两次状态，但是 React 会比较差异，并且在大多数情况下，它不会通过重新渲染来影响性能。

当你在 Flux 架构中有操作和存储时，这个原则将如何工作？在我的组件中，我可以这样做：

但是现在如何从服务器设置AppStore中的初始状态？如果我使用React.renderToString没有传递的属性，它将调用AppStore.getAppState()其中没有任何内容，因为我仍然不明白如何在服务器上的商店中设置状态？

2015 年 2 月 5 日更新

我仍在寻找一个干净的解决方案，它不涉及使用第三方 Flux 实现，如Fluxible、Fluxxor、Reflux。

2016 年 8 月 19 日更新

使用Redux。

这是我第一次使用 derbyjs，不知道是我愚蠢还是缺少文档。我有一个名为“书籍”的模型，我只是想显示书籍列表。

这是我的代码：

和架构列表

索引js

我希望在视图中有“书”，所以我这样写 {{each}}

但什么也没有出现，尽管这可以正常工作并按预期呈现

同样在网络控制台上，这工作正常并显示 3 本书

注意：我通过 Web 控制台添加了书籍，类似这样

在订阅功能中，我试图

但是出现了一个错误

知道我做错了什么吗？我真的很喜欢 derbyjs 但这几天让我退缩了

我的问题

我正在React中构建一个同构应用程序，它首先呈现组件服务器端，然后利用 React 的智能重新呈现浏览器端。

我遇到了一种情况，在 React 能够首先呈现浏览器端之前，DOM 可能与 React 组件的状态不同步。当用户的互联网连接速度较慢时，可能会发生这种情况，并且react.js文件需要一段时间才能下载（这也是我构建同构应用程序的原因）

例子

这是我放在一起展示这种情况的一个例子：http: //jsfiddle.net/jesstelford/z4o44esb

• 运行这个例子
• 切换复选框
• 点击“渲染反应”
• 当前的 React 状态在控制台中输出
• 请注意，它仍然设置为 { done: false } 这是不正确的

可能的（一半）解决方案

我找到了一种可能的解决方案：http React refs: //jsfiddle.net/jesstelford/z4o44esb/2

这种方法的缺点是：

• 渲染 DOM后同步状态
• 需要组件本身外部的额外代码才能在首次渲染时同步

我的问题

当在服务器端预渲染一个 React 组件时，有没有办法在它呈现浏览器端之前将 DOM 状态同步到该 React 组件，因为在 React 加载浏览器端之前，用户已经操作了 DOM？

谢谢！

在具有 Reactjs 的同构应用程序中，您需要将在服务器上呈现的相同初始状态传递给客户端（然后客户端将使用事件绑定等“重新水合”应用程序）。

我已经看到了两种方法来传递这个初始状态——

为窗口设置一个全局变量：

或将其作为 JSON 对象传递：

两者都可以从应用程序的任何位置轻松检索。使用其中一个有什么优势吗？

我正在做一个小样板项目，使用 node & express 使用 ReactJS 进行服务器端渲染。

我想知道如何识别Handler我的回调中的变量何时代表NotFound工厂，这样我就可以用 express抛出404 错误。就像是：res.status(404)

如果您想全面了解该文件，请随时访问其在 github 上的页面： https ://github.com/sergiocruz/react-boilerplate/blob/master/server.js

如果您对此感到好奇，也可以在这里浏览整个项目：https ://github.com/sergiocruz/react-boilerplate

我正在尝试为我的 reactjs 应用程序实现服务器端渲染。我正在使用 webpack 构建 reactjs 应用程序，增强解析来处理 nodejs 中 jsx 文件的导入。

我的应用程序依赖于第三方库，如 enquire.js。当 react 应用程序尝试在 nodejs 上导入 enquire.js 时，它失败并出现错误 ReferenceError: window is not defined

由于 window 对象不可用 nodejs 如何处理使用 window 进行服务器端渲染的库？

我正在构建一个用于管理营销登陆页面的 CMS 系统。在“编辑登陆页面”视图中，我希望能够为用户正在编辑的任何登陆页面加载关联的样式表。我怎么能用 React 做这样的事情？

我的应用程序是完全 React、同构的，在Koa上运行。我有问题的页面的基本组件层次结构如下所示：

登录页面的数据（包括要加载的样式表的路径）在EditLandingPagein 中异步获取ComponentDidMount。

如果您需要任何其他信息，请告诉我。很想弄清楚这一点！

奖励：我还想在离开页面时卸载样式表，我假设我可以做任何答案的逆向ComponentWillUnmount，对吧？

我对使用 React.js 为我的 Web 服务进行服务器端渲染感兴趣，但是我在尝试从使用 Express.js 开发的 Web 服务移植时遇到了一个问题。目前，我的网络服务服务于 2 个平台

1. 网络（Angular.js 客户端）
2. Android（本机应用程序 - 用 Ja​​va 开发）

我当前的架构是我的所有客户端都使用 JSON 连接到我的服务器。因此，我的客户端将向我的服务器发送一个 HTTP GET/POST 请求，我将返回 JSON。我的服务器不提供 HTML 页面。

下面是我使用 REST 的端点 APIS 的示例：

• /api/书籍
  1. GET - 返回带有书籍信息数组的 JSON
  2. POST - 发送一个 JSOn 到服务器，添加新书信息

我应该如何更改我的服务器端以包含 React？既然 React 使用服务器端渲染而不是使用 JSON 进行通信？

我当前的 Angular.js 项目，我将它们放在一个公共文件夹中，它用作静态文件。

可能的解决方案：

• 我应该添加一组新的 URL，一个用于呈现 (/books)，第二个用于 JSON (/api/books)？
• 服务器检测应用程序的类型（移动或网络）并相应地提供服务？

更新 1

另一种可能的解决方案

是使用 Express.js 内容协商（res.format），这样做我为处理 HTML 和 JSON 保持相同的路线？

我喜欢在 React 中做同构 JavaScript是多么容易。唯一困扰我的是它的工作原理是数据必须由浏览器下载两次。首先在 DOM 标记中，然后在 JSON 格式中以在运行时初始化状态。所有数据都已经存在于 DOM 中，难道 React 不应该仅凭这些数据就可以重新水化吗？

我已经做了一些实验，使用自定义绑定处理程序在 KnockoutJS 中进行渐进式增强。我希望有一种与 React 类似的方法。

更新

将逻辑放入从 DOM 读取值的 React 似乎并不习惯。但是没有什么能阻止您编写一些 JavaScript 来自己收集值！鉴于上面的示例，您可以执行以下操作。

然后使用它来初始化反应组件客户端。我对此很满意。