Восстановить шаблон загрузки компонента (или анти-шаблон?)

Question

Недавно я начал использовать ReactJS в своих проектах пользовательского интерфейса, что значительно упростило мой рабочий процесс пользовательского интерфейса. Действительно приятный 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 
} 

Мой вопрос, является ли это или нет надлежащим образом агрегировать данные в DOM с помощью React. Я оглянулся на идиоматический способ сделать это, но мой google-foo не смог ничего придумать.

Спасибо!

EDIT - как сторона примечания, кто-нибудь думает, что будет проблема с тем, как я уничтожаю контейнер, используя componentWillUnmount?

Answer 1

Основная проблема заключается в том, что вы используете идентификатор, который является негибким и делает предположения относительно остальных компонентов (поскольку идентификаторы должны быть глобально уникальными).

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, и нет никакой другой причины было бы быть назначен/удален, так что, если заявление не требуется.

Также аргументы не использовались и не были предоставлены компонентуWillUnmount. Эта подпись принадлежит componentDidUpdate.