React中通过props给子组件传state值时,为什么当父组件setState后props不能同步更新?

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>);
    }
});

总结来说就是:

  1. 父组件将自身的state通过props传值给子组件为什么变化不是实时的?

  2. 更近一步,怎样才能保证父子组件能够保持同步更新呢?

补充:
如果在父组件调用子组件的setState方法对于无循环的单一子组件有效,但是如果循环多个子组件的时候除非设置多个refs值。这样的方法感觉不是很好。

阅读 16.6k
5 个回答

父组件传递给子组件的props发生改变,引发子组件的render,并没有执行子组件的constructor函数,子组件没有被卸载自然不会重新加载,只会重新render,而如果父组件的props传递给子组件的state,那么子组件的state只会在第一次加载的时候被赋值,后续的父组件props变化并不会被赋值到子组件的state上,还是要理解组件的声明周期函数,以及各个函数在什么时候会被调用。

首先,setState可以是不保证同步的,因为有的情况下是同步的,有的情况下是异步的。当然记成异步的,比较安全方便。
其次,你给示例代码能不能更全面一点?只是这个样子什么问题都看不出来。一般来说,在render方法里面获取state的值都是最新的值,不会出现你说的情况

子模块(Sub)的代码呢?

setstate的效果是从render开始体现的,render之前生命周期函数中都是获取不到最新的state的,除非用this.state=nextState进行赋值;

当父组件的的props更新时,子组件的this.props的值也是从render函数开始执行的时候开始更新的,render之前生命周期函数中都是获取不到最新的this.props的,除非用this.props=nextProps进行更新

推荐问题
宣传栏