javascript - ReactJS 在客户端和服务器上运行不同的代码。

Question

我正在使用 https://github.com/andreypopp/react-quickstart在让页面在客户端动态更新之前在服务器端呈现页面。

有些页面需要来自服务器的数据。在客户端上运行时，他们通过 superagent 获取此信息。

在初始(服务器端)呈现期间，我希望页面的 getInitialState 直接获取它的数据。

这可能吗？

Answer 1

有几种方法可以解决这个问题。

您正在使用的模板 react-quickstart 使用 audreypopp 的 react-async 插件来处理具有异步状态的渲染组件。它的自述文件中有一个部分描述了这个确切的场景:https://github.com/andreypopp/react-async#rendering-async-components-on-server-with-fetched-async-state .

基本上，您可以向 ReactAsync.renderComponentToStringWithAsyncState 的回调函数添加第三个参数，它指向您当前服务器状态的快照。自述文件提供了以下示例:

ReactAsync.renderComponentToStringWithAsyncState(
  Component(),
  function(err, markup, data) {
    res.send(ReactAsync.injectIntoMarkup(markup, data, ['./client.js']))
})

injectIntoMarkup 将预取的状态数据作为 JSON blob 注入(inject)，可以在代码的其他地方引用为 window.__reactAsyncStatePacket。

另一种方法不使用 react-async。相反，您可以调用 React.renderComponentToString，将预取的服务器数据作为 props 传递。

var markup = React.renderComponentToString(
    Item({ data: SERVER_DATA })
);

注意:您必须向您的组件代码添加一些条件逻辑，以区分直接作为 props 或通过 ajax/superagent 接收您的状态，但它应该直截了当。

现在，为了这个例子，假设您正在使用 Handlebars/Express，您可以将组件字符串注入(inject)到模板中:

res.render('template', {
    markup: markup
});

还有你的模板:

<div id="container">{{{ markup }}}</div>

最后，为了让您的组件在客户端上正常工作，您可以像通常在客户端上那样调用 React.renderComponent。 React 知道不会替换刚刚从服务器渲染的组件，但会在将来必要时重新渲染它们。

希望这对您有所帮助，并乐于回答任何问题!