3

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

React 组件在服务器端呈现的屏幕截图 以 JSON 格式复制的数据的屏幕截图

我已经做了一些实验，使用自定义绑定处理程序在 KnockoutJS 中进行渐进式增强。我希望有一种与 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());
        }
    }
};

更新

将逻辑放入从 DOM 读取值的 React 似乎并不习惯。但是没有什么能阻止您编写一些 JavaScript 来自己收集值！鉴于上面的示例，您可以执行以下操作。

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

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

4

2 回答 2

2

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

从你的例子（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>
于 2015-02-13T17:14:02.953 回答
0

您真正想要做的是通过脚本标记将用于呈现的服务器端数据存储在 javascript 变量中，然后从该客户端对象而不是服务器初始化您的反应。

于 2015-02-17T18:31:04.093 回答