Я новичок в React.js, и я стараюсь понять несколько методов в методах жизненного цикла реагирования.реагировать на методы жизненного цикла понимание
До сих пор, я все еще есть что-то, что меня смущает:
1)
Насколько я понимаю, разница между componentWillUpdate и componentWillReceiveProps является то, что componentWillReceiveProps будет вызываться, когда родитель изменить реквизита и мы может использовать setState (setState этого ребенка внутри componentWillReceiveProps).
, например: https://github.com/bgerm/react-table-sorter-demo/blob/master/jsx/app.jsx
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 от родителей в детстве? Или, может быть, я ошибаюсь, следующий элемент передан из родительского элемента?
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 || [] Int метода getInitialState?
Надеюсь, вы сможете понять мои объяснения, и, пожалуйста, дайте мне несколько советов, если у вас есть. Большое спасибо за это :)
nextState бы не получить передается от родителей к ребенку. –