7

我的问题

我正在React中构建一个同构应用程序，它首先呈现组件服务器端，然后利用 React 的智能重新呈现浏览器端。

我遇到了一种情况，在 React 能够首先呈现浏览器端之前，DOM 可能与 React 组件的状态不同步。当用户的互联网连接速度较慢时，可能会发生这种情况，并且react.js文件需要一段时间才能下载（这也是我构建同构应用程序的原因）

例子

这是我放在一起展示这种情况的一个例子：http: //jsfiddle.net/jesstelford/z4o44esb

  • 运行这个例子
  • 切换复选框
  • 点击“渲染反应”
  • 当前的 React 状态在控制台中输出
  • 请注意，它仍然设置为 { done: false } 这是不正确的
var TodoItem = React.createClass({

  // ...

  render: function() {
    return (
      <label>
        <input type="checkbox" defaultChecked={this.state.done} onChange={this.onChange} />
        {this.props.name}
      </label>
    );
  }
});

// User toggles checkbox ON here, before React is rendered browser-side

// render using React browser-side
var renderedComponent = React.render(component, document.getElementById('content'));

// Incorrectly outputs { done: false }  
console.log('React state:', renderedComponent.state);

可能的（一半）解决方案

我找到了一种可能的解决方案：http React refs: //jsfiddle.net/jesstelford/z4o44esb/2

var TodoItem = React.createClass({

  // ...

  syncStateFromDOM: function() {
    this.setDone(this.refs.done.getDOMNode().checked);
  },

  render: function() {
    return (
      <label>
        <input ref="done" type="checkbox" defaultChecked={this.state.done} onChange={this.onChange} />
        {this.props.name}
      </label>
    );
  }
});

// User toggles checkbox ON here, before React is rendered browser-side

// render using React browser-side
var renderedComponent = React.render(component, document.getElementById('content'));

// Sync state from the DOM
renderedComponent.syncStateFromDOM()

// Correctly outputs { done: true }  
console.log('React state:', renderedComponent.state);

这种方法的缺点是：

  • 渲染 DOM后同步状态
  • 需要组件本身外部的额外代码才能在首次渲染时同步

我的问题

当在服务器端预渲染一个 React 组件时，有没有办法在它呈现浏览器端之前将 DOM 状态同步到该 React 组件，因为在 React 加载浏览器端之前，用户已经操作了 DOM？

谢谢！

4

1 回答 1

6

这是一个有趣的问题！在高层次上，问题是 React 没有捕捉到当您单击复选框时冒泡到顶级组件的“更改”事件，因为它还没有在客户端实例化。您的半解决方案通过手动模拟对onChange. 我开始认为你可能需要排队 onChange 事件......但后来我意识到 React 已经拥有你需要的一切。

“四分之三”的解决方案是简单地重命名syncStateFromDOM为componentDidMount，甚至不用手动调用它。根据文档，在最新版本的 React 中，componentDidMount仅在浏览器中调用，它是组件挂载后的生命周期回调（即何时React.render返回）。这是您的用例的理想场所。见：http: //jsfiddle.net/qdt4z3w9/

这解决了组件本身外部代码的问题！但在原始渲染发生后，状态设置仍在进行中。不幸的是，我认为这基本上是 React 的工作方式——为了能够将现有的 DOM 节点匹配到 refs，每个组件都需要首先完全安装。但是额外的虚拟 DOM 差异是一个很小的代价，因为它被设计为闪电般快速。

希望这可以帮助！

于 2014-12-16T07:02:29.303 回答