Я новичок в React.js и очень стараюсь понять несколько методов в методах жизненного цикла React.
Пока у меня есть кое-что, что меня смущает:
1)
Насколько я понимаю, разница между componentWillUpdate и componentWillReceiveProps
в том, что componentWillReceiveProps будет вызываться, когда родитель меняет реквизит, и мы можем использовать setState (setState этого потомка внутри componentWillReceiveProps).
например: реакция-таблица-сортировщик-демонстрация
var App = React.createClass({
getInitialState: function() {
return {source: {limit: "200", source: "source1"}};
},
handleSourceChange: function(source) {
this.setState({source: source});
},
render: function() {
return (
<div>
<DataSourceSelectors onSourceChange={this.handleSourceChange} source={this.state.source} />
<TableSorter dataSource={urlForDataSource(this.state.source)} config={CONFIG} headerRepeat="5" />
</div>
);
}
});
В TableSorter у нас есть
componentWillReceiveProps: function(nextProps) {
// Load new data when the dataSource property changes.
if (nextProps.dataSource != this.props.dataSource) {
this.loadData(nextProps.dataSource);
}
}
То есть, когда мы изменим this.state.source, мы ожидаем, что componentWillReceiveProps будет вызван в TableSorter.
Тем не менее, я не совсем понимаю, как использовать componentWillUpdate в этом случае, определение componentWillUpdate является
componentWillUpdate(object nextProps, object nextState)
Как мы можем передать nextState от родителя в child? Или, может быть, я не прав, передается ли nextState из родительского элемента?
2)
метод componentWillMount смущает меня, потому что в официальной документации говорится, что
Вызывается один раз, как на клиенте, так и на сервере, непосредственно перед Первоначальный рендеринг происходит.
В этом случае, если я использую setState в этом методе, он переопределит getInitialState, так как он будет вызван только один раз изначально. В этом случае, какова причина для установки параметров в методе getInitialState. В данном конкретном случае мы имеем:
getInitialState: function() {
return {
items: this.props.initialItems || [],
sort: this.props.config.sort || { column: "", order: "" },
columns: this.props.config.columns
};
},
componentWillMount: function() {
this.loadData(this.props.dataSource);
},
loadData: function(dataSource) {
if (!dataSource) return;
$.get(dataSource).done(function(data) {
console.log("Received data");
this.setState({items: data});
}.bind(this)).fail(function(error, a, b) {
console.log("Error loading JSON");
});
},
элементы будут переопределены изначально и зачем нам все еще нужно
items: this.props.initialItems || [] в методе getInitialState?
Надеюсь, вы понимаете мое объяснение, и, пожалуйста, дайте мне несколько советов, если у вас есть.
