• home > webfront > ECMAS > react >

    react更新组件componentWillReceiveProp里面setState无效,未触发渲染

    Author:zhoulujun@live.cn Date:

    react 父组件state传入的props参数改变,但是,子组件并没有改变! 在react componentWillReceiveProps 接受数据不变

    react 父组件state传入的props参数改变,但是,子组件并没有改变!

    在react  componentWillReceiveProp函数里面用this.setState 设置this.po.show 接受数据不变,组件怎么搞都吧更新!



    ;
    
    //Popup
    componentWillReceiveProps(nextProps){
      // console.log('this.props.show componentWillReceiveProps' );
      // console.log(this.props);
      // console.log();
        this.setState(
            {
                show:this.po.show
            }
        );
    }

    然后再官方网站看到这么句话

    当节点初次被放入的时候 componentWillReceiveProps 并不会被触发。这是故意这么设计的。查看更多 其他生命周期的方法 。


    原因是因为 componentWillReceiveProps 经常会处理一些和 old props 比较的逻辑,而且会在变化之前执行;不在组件即将渲染的时候触发,这也是这个方法设计的初衷。

    以为是这个原因


    然后看了下其他方法


    shouldComponentUpdate

    如果你确定组件的 props 或者 state 的改变不需要重新渲染,可以通过在这个方法里通过返回 false 来阻止组件的重新渲染,返回 `false 则不会执行 render 以及后面的 componentWillUpdate,componentDidUpdate 方法。

    该方法是非必须的,并且大多数情况下没有在开发中使用。

    shouldComponentUpdate: function(nextProps, nextState){
        return this.state.checked === nextState.checked;
        //return false 则不更新组件
    }

    componentWillUpdate

    这个方法和 componentWillMount 类似,在组件接收到了新的 props 或者 state 即将进行重新渲染前,componentWillUpdate(object nextProps, object nextState) 会被调用,注意不要在此方面里再去更新 props 或者 state。


    componentDidUpdate

    这个方法和 componentDidMount 类似,在组件重新被渲染之后,componentDidUpdate(object prevProps, object prevState) 会被调用。可以在这里访问并修改 DOM


    最后才知道,然后,发现了nextProps,尼玛

    React的这个方法里,nextProps 代表将接受到的新props,this.props代表先前的porps


    componentWillReceiveProps(nextProps){
      // console.log('this.props.show componentWillReceiveProps' );
      // console.log(this.props);
      // console.log(nextProps);
        this.setState(
            {
                show:nextProps.show
            }
        );
    }

    okay,一切正常!


    转载本站文章《react更新组件componentWillReceiveProp里面setState无效,未触发渲染》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/jsBase/2014_0813_7946.html