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>
       )
   }   
});

但是“赞按钮”没有任何交互。要使其单击，我必须添加此代码客户端。

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

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

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

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

所有这些事情的发生都非常快。这样您就可以受益于搜索引擎将抓取的服务器端渲染页面（可以使用Varnish或类似方法缓存在服务器上），用户无需等待任何时间即可看到初始渲染，并且页面基本上适用于已禁用JavaScript的用户。