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

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