Я работаю с фреймворком Framework React.js вместе с Backbone в течение последних нескольких недель, и я все еще не совсем уверен, что является наиболее подходящим способом повторного рендеринга компонента React, когда есть изменения в Магистральная коллекция, которая была передана в качестве опоры.
в настоящее время то, что я делаю, находится в componentenentWillMount. Я настроил изменение/добавление/удаление слушателей в коллекции и установил состояние, когда он вызывает:
componentWillMount: function(){
var myCollection = this.props.myCollection;
var updateState = function(){
this.setState({myCollection: myCollection.models});
}
myCollections.on("add remove", updateState, this);
updateState();
}
render: function(){
var listItems = this.state.myCollection.map(function(item){
return <li>{item.get("someAttr")}</li>;
});
return <ul>{listItems}</ul>;
}
Я видел примеры, когда модели клонируются к состоянию:
var updateState = function () {
this.setState({ myCollection: _.clone(this.myCollection.models) });
};
Я также видел варианты, в которых модель/коллекция в реквизитах используется непосредственно в рендере вместо использования состояния, а затем принудительно вызывается принудительнаяUpdate при изменении коллекции/модели, в результате чего компонент повторно отображает
componentWillMount: function(){
var myCollection = this.props.myCollection;
myCollections.on("add remove", this.forceUpdate, this);
}
render: function(){
var listItems = this.props.myCollection.map(function(item){
return <li>{item.get("someAttr")}</li>;
});
return <ul>{listItems}</ul>;
}
Какие преимущества и недостатки существуют для разных подходов? Есть ли способ сделать это, то есть "The React way"?
