关于react子组建state初始化值为父组建传来的props问题

问:React中通过props给子组件传state值时,为什么当父组件setState后props不能同步更新?而当父组件再次setState时props值却是这次修改前的state。

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

扩展:

子组件显示父组件穿过来的props有两种方式:

1、直接使用

这种方式,父组件改变props后,子组件重新渲染,由于直接使用的props,所以我们不需要做什么就可以正常显示最新的props

class Child extends Component {
    render() {
        return 
{this.props.someThings}
} }

2、转换成自己的state

这种方式,由于我们使用的是state,所以每当父组件每次重新传递props时,我们需要重新处理下,将props转换成自己的state,这里就用到了 componentWillReceiveProps。

关于你提到的不会二次渲染是这样的:每次子组件接收到新的props,都会重新渲染一次,除非你做了处理来阻止(比如使用:shouldComponentUpdate),但是你可以在这次渲染前,根据新的props更新state,更新state也会触发一次重新渲染,但react不会这么傻,所以只会渲染一次,这对应用的性能是有利的。

class Child extends Component {
    constructor(props) {
        super(props);
        this.state = {
            someThings: props.someThings
        };
    }
    componentWillReceiveProps(nextProps) {
        this.setState({someThings: nextProps.someThings});
    }
    render() {
        return 
{this.state.someThings}
} }

https://segmentfault.com/q/1010000008387645
https://segmentfault.com/q/1010000006019858

你可能感兴趣的:(关于react子组建state初始化值为父组建传来的props问题)