React中通过props给子组件传state值时,为什么当父组件setState后props不能同步更新?而当父组件再次setState时props值却是这次修改前的state。
貌似和setState是异步执行有关,但是不知道哪位大神讲的更清楚一点。
示例代码:
var P = React.createClass({
getInitialState: function(){
return {
is: '1'
}
},
componentDidMount: function(){
this.setState({
is: '2'
});
},
render: function(){
return(
<div>
<Sub is={this.state.is} />
</div>
);
}
});
const Sub = React.createClass({
render: function(){
//console.log(this.props.is);
return (<div>{this.props.is}</div>);
}
});
总结来说就是:
父组件将自身的state通过props传值给子组件为什么变化不是实时的?
更近一步,怎样才能保证父子组件能够保持同步更新呢?
补充:
如果在父组件调用子组件的setState方法对于无循环的单一子组件有效,但是如果循环多个子组件的时候除非设置多个refs值。这样的方法感觉不是很好。
父组件传递给子组件的props发生改变,引发子组件的render,并没有执行子组件的constructor函数,子组件没有被卸载自然不会重新加载,只会重新render,而如果父组件的props传递给子组件的state,那么子组件的state只会在第一次加载的时候被赋值,后续的父组件props变化并不会被赋值到子组件的state上,还是要理解组件的声明周期函数,以及各个函数在什么时候会被调用。