我是React.js的新手,我正在努力理解React生命周期方法中的几种方法。
到目前为止,我感到有些困惑:
1)
据我了解,之间的差别componentWillUpdate,并componentWillReceiveProps 是,componentWillReceiveProps当父改变了道具,我们可以使用的setState(这个孩子里面的setState将被调用componentWillReceiveProps)。
componentWillUpdate
componentWillReceiveProps
例如:react-table-sorter-demo
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中被调用。
this.state.source
但是,我不太了解如何componentWillUpdate在这种情况下使用,定义componentWillUpdate为
componentWillUpdate(object nextProps, object nextState)
我们如何将nextState从父级传递给子级?还是我错了,nextState是从父元素传递的吗?
2)方法componentWillMount使我感到困惑,因为在官方文档中,它说
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方法中使用?
items: this.props.initialItems || []
希望您能理解我的解释,如果有任何提示,请给我一些提示。
1)在React的更新生命周期中componentWillReceiveProps被调用componentWillUpdate。您说对了,componentWillReceiveProps可以打电话给您setState。另一方面componentWillUpdate是当您需要响应状态更改时使用的回调。
setState
道具和状态之间的根本区别在于状态是组件的私有属性。这就是父组件或其他任何人都不能操纵组件状态(例如call setState)的原因。因此,父子组件关系的默认工作流程如下:
2)您提供了一个很好的代码示例来说明差异。设置的默认值getInitialState将用于初始渲染。loadData来自的呼叫componentWillMount会发起一个AJAX请求,该请求可能会成功也可能不会成功- 而且,未知需要多长时间才能完成。到AJAX请求完成并setState以新状态调用时,该组件将使用默认值呈现在DOM中。因此,在中提供默认状态是很有意义的getInitialState。
getInitialState
loadData
注意:我发现《了解React组件生命周期》一文对理解React的生命周期方法有很大的帮助。