dom - ReactJS 可以根据服务器端渲染的 DOM 初始化其状态吗？

Question

我喜欢它是多么容易做到isomorphic JavaScript in React 。唯一让我困扰的是它的工作原理是浏览器必须下载数据两次。首先是 DOM 标记，然后是 JSON 格式，以便在运行时初始化状态。所有数据都已经存在于 DOM 中，React 不应该能够仅基于这些数据进行重新水化吗？

我已经做了一些实验 progressive enhancement in KnockoutJS使用自定义绑定(bind)处理程序。我希望有一种方法可以实现与 React 类似的功能。

//Custom binding to load the values into the view model from the DOM
ko.bindingHandlers.PE = {
    init: function(element, valueAccessor, allBindings) {
        var bindings = allBindings();
        if (typeof bindings.text === 'function') {
            bindings.text($(element).text());
        }
    }
};

更新

将逻辑放入 React 中以从 DOM 读取值似乎并不符合习惯。但没有什么可以阻止您编写一些 JavaScript 来自己收集值!鉴于 example above你可以做类似下面的事情。

var comments = $('.media').map(function() {
  return {
    Author: $(this).find('.media-object').attr('src'),
    Text: $(this).find('.media-body').text()
  };
});

然后使用它来初始化客户端的 react 组件。我对此很满意。

Answer 1

渲染是 React 中的一种单向转换。它没有在 DOM 中存储足够的信息来重建创建 DOM 的数据结构。 data-react-id 属性用于 React 的 diffing algorithm但不用于存储有关用户数据的信息。

从你的例子(data-react-id这里是任意的，我手写的):

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h3 className="commentAuthor">{this.props.comment.Author}</h3>
        {this.props.comment.Text}
      </div>
    );
  }
});

React.render(
  <Comment comment={{"Author": "Shellie", "Text": "semper, dui lectus"}} />,
  ...
);

...

<!-- Output -->
<div class="comment" data-react-id=".x.0">
  <h3 class="commentAuthor" data-react-id=".x.0.0">Shellie</h3>
  <span data-react-id=".x.0.1">semper, dui lectus</span>
</div>

DOM 中没有关于字符串“Shellie”来自何处以及“semper, dui lectus”来自何处的信息。此示例产生相同的输出:

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h3 className="commentAuthor">Shellie</h3>
        semper, dui lectus
      </div>
    );
  }
});

React.render(
  <Comment />,
  ...
);

...

<!-- Output -->
<div class="comment" data-react-id=".x.0">
  <h3 class="commentAuthor" data-react-id=".x.0.0">Shellie</h3>
  <span data-react-id=".x.0.1">semper, dui lectus</span>
</div>