React.js 服务器端渲染和事件处理程序

Question

我正在学习使用 react.js，但在使用事件处理程序时遇到了一些问题。最后一个问题是：是否可以使用服务器端渲染并将事件处理程序自动发送到客户端？

这是我的例子： 我有一个 index.jsx 渲染服务器端并发送到客户端

var React = require("react");
var DefaultLayout = require("./layout/default");

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false}; 
  }, 
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  }, 
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  } 
});

var IndexComponent = React.createClass({
   render: function(){
       return (
           <DefaultLayout title={this.props.name}>
                <div>
                        <h1>React Test</h1>
                </div>

                <div id="testButton">
                    <LikeButton/>
                </div> 

                <script type="text/babel" src="/js/react.js"></script>
           </DefaultLayout>
       )
   }   
});

但是“Like Button”没有任何交互作用。为了让它在点击时做一些事情，我必须添加这个代码客户端。

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('testButton')
);

我刚开始使用 react.js，也许我只是在这里遗漏了一些主要概念。但是为什么 react.js 在渲染页面服务器端时不只是创建代码（我现在必须手动添加到客户端）？ 像这样，我有冗余代码，感觉在大型应用程序中这将是一团糟。 至少 react.js 足够聪明，不会绘制两个 LikeButton，而是将创建的服务器端“绑定”到客户端组件。

Answer 1

这种行为是因为服务器端渲染到底是什么。 首先，您必须在客户端和服务器端运行完全相同的代码。这就是所谓的同构应用程序。在服务器和客户端上运行的一种。
因此，在执行ReactDOM.renderToString(<Component>) 时，仅将 HTML 呈现为字符串。评估组件的渲染方法并生成初始渲染所需的 HTML。
当在客户端运行相同的代码时，react 会查找呈现的 HTML 并将 JS 附加到所需的位置。 React 这种方式很聪明，它不会在客户端重新渲染所有内容。只需评估代码并根据给定的每个 DOM 元素 react-id 确定所有附加代码的位置。 （如果你检查元素任何反应应用程序，你会 react-id）

现在有人可能会问，两次渲染相同的东西有什么好处？
答案是用户perceived loading time。并且对于禁用 JS 的用户也有一些最低限度的查看。

客户端呈现的应用程序
这就是单独客户端呈现的应用程序的工作方式。 （客户端也呈现 React 应用程序）

用户只会在所有骨架 HTML、JS 包（通常非常大）以及获取和评估数据之后才能看到内容。这意味着用户通常必须盯着微调器或加载屏幕一会儿，直到所有内容加载完毕。

同构应用程序（在客户端和服务器上运行）
同构应用程序的工作原理，

在这种情况下，服务器会通过评估您的组件来生成 完整 HTML。下载 HTML 后，用户将立即看到内容。 虽然只有在 JS 包也被下载和评估后，该应用才能完全运行。所以 JS 必须两边都运行
因此，用户看到内容的速度比以前快得多。因此，感知加载时间大幅减少。

Answer 2

对于客户端交互式 React 应用程序，您还需要渲染应用程序客户端。通常此代码与您在服务器上运行的代码相同，因此没有多余的代码。这只是相同的代码。您可能会问自己，是否在客户端和服务器上都进行渲染可能有点过头了，但从性能和 SEO 的角度来看，这是完全合理的。

ReactDOMServer.renderToString(<MyApp foo={bar} />) 基本上只是呈现带有标记的字符串。那里没有 javascript 或任何魔法。只是普通的旧 HTML。但是，渲染的标记有很多 React ID 属性，这些属性稍后会在客户端上用于生成初始虚拟 DOM 和附加事件。

当您在客户端再次渲染您的应用程序时，在服务器端渲染标记注入到服务器的同一个 DOM 元素上，React 不需要重绘整个应用程序。它只是创建一个新的虚拟 DOM 树，将其与初始虚拟 DOM 树进行比较，并执行必要的 DOM 操作（如果有）。虚拟 DOM 的这个概念首先是让 React 如此快速的原因。在同一过程中，您在应用程序中定义的任何事件侦听器都将附加到已呈现的标记。

所有这一切都发生得非常快。并且您将受益于搜索引擎将抓取的服务器端渲染页面（可以缓存在服务器上，使用 Varnish 或类似的东西），用户无需等待任何内容即可看到初始渲染，并且页面基本上适用于禁用 javascript 的用户。