首页 > webfront > ECMAS > react > > 正文

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

发布人:zhoulujun@live.cn    点击:

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,一切正常!