反應同構-客戶端/服務器同時動作的問題

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有效地構建同構應用。