首頁 > webfront > ECMAS > react > > 正文

react更新組件componentWillReceiveProp里面setState無效,未觸發渲染

發布人:[email protected]    點擊:

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