javascript - react 组件加载模式(或反模式？)

我最近开始在UI项目中使用ReactJS，这大大简化了UI工作流程。真正令人愉快的API。

我最近注意到，我不得不在一些需要在页面上聚合数据的项目中使用一种模式。这些数据将存在于DOM中，而不依赖于使用React状态进行数据转换。

这是一个示例实现：

var Component = module.exports = React.createClass({

  componentDidMount: function() {
    this.component = new Component();
    this.component.start();
  },

  componentWillUnmount: function(prevProps, prevState) {
    if (this.component !== undefined) {
      this.component.destroy();
    }
  },

  render: function() {
    return (
      <div id="componentContainer"></div>
   );
  }

});


var Component = function(){
    // Some object that dynamically loads content in a
    // pre-packaged NON-react component into componentContainer
    // such as a library that renders a graph, or a data loader
    // that aggregates DOM elements using an infinite scroll
}

我的问题是这是否是使用React将数据聚合到DOM中的正确方法。我到处寻找惯用的方法，但是我的google-foo无法提出任何建议。

谢谢！

编辑-作为附带说明，有人认为使用componentWillUnmount销毁容器的方式会有问题吗？

最佳答案

主要问题是您使用的ID不灵活，并且会针对其余组件进行假设（因为ID必须是全局唯一的）。

module.exports = React.createClass({
  componentDidMount: function() {
    // pass a DOM node to the constructor instead of it using an id
    this.component = new Component(this.getDOMNode());
    this.component.start();
  },

  componentWillUnmount: function() {
    this.component.destroy();
  },

  render: function() {
    return <div />;
  }
});

您的componentWillUnmount很好，但是您在其中设置了this.component的位置将始终在componentWillUnmount之前运行，并且没有其他原因将其分配/删除，因此不需要if语句。

同样，两个参数均未使用，也未提供给componentWillUnmount。该签名属于componentDidUpdate。