React.js Serverside渲染和事件处理程序 [英] React.js Serverside rendering and Event Handlers

问题描述

我正在学习使用react.js并且有一些问题来使用事件处理程序。最后一个问题是：是否可以自动使用服务器端呈现和发送事件处理程序到客户端？

I am learning to use react.js and have some issues to use the event handlers. The final question would be: Is it possible to use server side rendering and send event handlers to the client automaticly?

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

Here is my example: I have an index.jsx which I render server side and send to the client

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没有任何交互。为了让它做点什么，我必须添加这个代码客户端。

But the "Like Button" does not have any interaction. To make it do something on click I have to add this code client side.

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很聪明，不能绘制两个LikeButtons，而是将一个创建的服务器端绑定到客户端组件。

I only started out with react.js and maybe I am just missing some major concept here. But why does react.js not just create the code (which I now have to add manually to the client) when rendering the page server side? Like this, I have redundant code and it feels like this will be a mess in larger applications. At least react.js is smart enough to not draw two LikeButtons but to "bind" the one created server side to the client side component.

推荐答案

对于客户端交互式React应用，您还需要呈现应用客户端。通常这个代码与在服务器上运行的代码相同，所以没有冗余代码。这只是一样的代码。您可能会问自己，客户端和服务器上的呈现可能是否过度，但从性能和SEO的角度来看，这是非常有意义的。

For a client side interactive React app, you need to render the app client side too. Usually this code is identical to the code you run on the server, so there is no redundant code. It's just the same code. You may ask yourself if rendering on both client and server might be overkill, but from a performance and SEO point of view it makes perfect sense.

ReactDOMServer.renderToString（< MyApp foo = {bar} />）基本上只是使用标记呈现一个字符串。没有任何javascript或任何魔术在那里。只是简单的老HTML。然而，渲染的标记具有很多React ID属性，后来在客户机上使用它来生成初始的虚拟DOM并附加事件。

ReactDOMServer.renderToString(<MyApp foo={bar} />) basically just renders a string with markup. There is no javascript or any magic going on there. Just plain old HTML. However, the rendered markup has lots of React ID attributes that are later used on the client to generate the initial Virtual DOM and attach events.

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

When you render your application again on the client, on the same DOM element in which your server side rendered markup was injected on the server, React doesn't need to redraw the entire application. It just creates a new Virtual DOM tree, diffs it with the initial Virtual DOM tree, and does the necessary DOM operations, if any. This concept of the virtual DOM is what makes React so fast in the first place. In the same process, any event listeners you have defined in your application will be attached to the already rendered markup.

所有这些都发生得很快。而且您可以利用服务器端呈现的页面（可以在服务器上缓存，使用Varnish或类似的东西），搜索引擎会抓取，用户不需要等待任何东西来查看初始渲染，而页面基本上适用于已禁用JavaScript的用户。

All of this happens really fast. And you have the benefit of a server side rendered page (that can be cached on the server, using Varnish or something similar) that search engines will crawl, users don't need to wait for anything to see the initial render, and the page basically works for users who have disabled javascript.

这篇关于React.js Serverside渲染和事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！