我是 React.js 的新手,我正在努力理解 React 生命周期方法中的几种方法。
到目前为止,我有一些让我感到困惑的事情:
1)
据我了解,之间的差别componentWillUpdate
,并componentWillReceiveProps
是,componentWillReceiveProps
当父改变了props,我们可以使用的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 从 parent 传递给 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 方法中?
希望你能理解我的解释,如果你有任何提示,请给我一些提示。