反应同构-客户端/服务器同时动作的问题

Question

我正在尝试使用React和Node（Isomorphic Rendering Architecture）构建我的应用程序。 我在github示例项目中找到了，但是我遇到了问题。 我想一起开发我的项目客户端和服务器，以便同一组件可以同时从客户端nad服务器获取任何数据/操作。 例如：

var Component = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        {this.props.client}
        {this.props.server}
      </div>
    );
  }
});

您可以看到，Component一起从客户端和服务器获取道具。 我该怎么做？ 我尝试了3个github项目，但始终无法实现。 我不知道为什么。 当然，当我仅通过服务器或仅通过客户端渲染Component时，它可以工作，但不能一起工作。

例如，当我通过服务器渲染Component时，我无法执行任何特定于客户端的操作（onclick警报等）。 这就是为什么它对我很重要。 从服务器渲染一些数据并执行一些客户端操作。 但是在一起，仍然在同一个组件上。

对不起，我的英语不好！

Answer 1

Jan，使用React无法做到这一点。

他们不会“同时”工作。
服务器端React代码通过将HTML页面构建为文本字符串并将HTML文本提供给客户端来工作。
浏览器加载页面后，浏览器中的React代码会将其自身附加到页面上放置的React代码（因为服务器会打印出所有组件的ID，之后再附加给浏览器）。

因此，目标是将数据馈送到组件，而不是期望同时访问浏览器和服务器。 这样，您可以使用服务器端代码来获取组件的数据，并且可以使用客户端代码来获取组件的数据，而该组件将不在乎。

一般来说，这不是十分有效的React或正确的JS制作方法，但请看一下：

class ServerElement {
  render ( ) {
    // sync calls should rarely ever (ideally never, other than booting up) be used
    var articles = db.syncGetArticles();

    return <Articles articles={ articles } />;
  }
}

class BrowserElement {
  render ( ) {
    // isn't real, and should never be used even if it was
    var articles = ajax.sync("GET", "/articles");

    return <Articles articles={ articles } />;
  }
}

这里的重要部分不是Server或Browser元素（就像我说的那样，实际上并没有用），而是<Articles />元素不希望有服务器或浏览器。 它期待文章列表。

因此，这种方法的好处是服务器可以构建HTML，但是在提供页面之前，它会预先填充数据，然后在浏览器中对其进行更新（替换或添加）。

我希望能有所帮助； 如果没有，请问一下，我将尝试添加答案。

Answer 2

@Norguard谢谢您的全面答复。 我正在尝试拥有您的答案。 我知道您的示例代码对于React / JS cuz无效，我们必须在模型区域中构建数据库操作。 但是有一件事使我感到困惑。 我们通过“ / articles”发送API并从中获取数据。 好的，很酷，但这仍然是公共数据。 我想知道私人数据。 如何使用React Isomorphic获取特定数据或服务器（如果/其他情况）以构建更好的应用程序。

如果我们使用客户端模板语言（例如ejs），则非常简单。 我们正在针对特定标签构建.html文件和注入服务器方法（或其他方法）以模板化语言。 在React服务器上怎么做？ 我无法想象使用组件和服务器。

我想我理解您向我展示的想法，但是需要一些时间来使用React有效地构建同构应用。