Question

我最近开始在我的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销毁容器的方式会有问题吗？

Answer 1

主要问题是你使用的是一个不灵活的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。

反应组件加载模式（或反模式？）

1 个答案: