react 的生命周期

constructor(props) {
        super(props);
        this.state = {
            form:this.props.form
        };
    }
    
    <p>{this.props.form.name}</p>

為啥我這里子組件初始化通過(guò)pros獲取父組件數(shù)據(jù)
當(dāng)我子組件調(diào)用父組件事件改變數(shù)據(jù)后子組件的值
name還能被改變初始化方法不是只執(zhí)行一次么

當(dāng)我有兩個(gè)組件A 和 B A組件調(diào)用父組件方法父組件數(shù)據(jù)改變
觸發(fā)B組件數(shù)據(jù)更新操作時(shí) A組件按上面的寫法數(shù)據(jù)正常傳遞
B組件不行 B組件通過(guò)componentWillReceiveProps（）方法才可更新數(shù)據(jù)

 
父組件
class ComModal extends React.Component{
        constructor(props) {
            super(props);
            this.state = {
              form:{
                  
              },
              show:false
              
            };
        }
        showChange(){
            that.setState({
                show:true
            })
        }
        
        render(){
            return(
                <div>
                    <A cbclick={e=>that.showChange()}/>
                    <B show={that.state.show}/>
                </div>
            )
        }
    }
    
  A組件
  class A extends React.Component{
      調(diào)用showChange()
  }
  B組件
   class B extends React.Component{
     constructor(props) {
        super(props);
        this.state = {
           show:this.props.show    //這樣的話A改變show后 render里不會(huì)改變
        };
    }
    componentWillReceiveProps(nextProps){
        這里可以
    }
   
      render(){
          return (
              <p>{that.state.show?'展示'：'隱藏'}</p>
          )
      }
  }

回答

編輯回答

傲嬌范

React有三個(gè)階段：掛載、更新和卸載。

掛載的聲明周期主要有：

constructor
render
componentDidMount

其中constructor里把父組件傳遞的props綁定到子組件的this上。

如果調(diào)用父組件傳遞的回調(diào)函數(shù)來(lái)改變數(shù)據(jù)，那么父組件傳遞的props會(huì)出現(xiàn)變化
此時(shí)觸發(fā)子組件的更新階段：

componentWillReceiveProps
shouldComponentUpdate
render
componentDidUpdate。

當(dāng)我子組件調(diào)用父組件事件改變數(shù)據(jù)后子組件的值name還能被改變

我對(duì)你說(shuō)的這句話里的改變，理解是頁(yè)面中展示的數(shù)據(jù)變了。而控制頁(yè)面展示變化的是render生命周期，上文中可以看到不管是掛載還是更新，都會(huì)觸發(fā)render。

2018年6月5日 05:52

編輯回答

脾氣硬

就不能打個(gè)react的標(biāo)簽？

2018年4月29日 05:50

編輯回答

萢萢糖

父組件通過(guò)props傳遞數(shù)據(jù)給子組件，props變化，子組件獲取到的數(shù)據(jù)也會(huì)變化的，有個(gè)屬性變化的函數(shù)可以偵測(cè)到

2017年2月8日 17:41

編輯回答

萢萢糖

純看程式
小弟認(rèn)為是因?yàn)?Ｂ組件 constructork 的部分只有在一開始render的時(shí)候作用了一次
因此
Ｂ組件內(nèi)的state 的show 一直都只一開始的 props.show
若你要用Ａ組件的按鈕父組件的方法去改Ｂ組件的屬性
Ｂ組件內(nèi)應(yīng)改成
<p>{that.props.show?'展示'：'隱藏'}</p>
或是
<p>{this.props.show?'展示'：'隱藏'}</p>

試試可否?

2017年10月9日 01:07

編輯回答

悶騷型

constructor(props) {
        super(props);
        this.state = {
            form:this.props.form //需要在本組建進(jìn)行改變的話就賦值給本組建自己的state，
            //只是展示作用的話就不要初始化這個(gè)state
        };
    }
    
    <p>{this.props.form.name}</p>{/*對(duì)于本組建只是展示作用*/}
    <p>{this.state.form.name}</p>{/*在本組建內(nèi)會(huì)對(duì)form進(jìn)行更改*/}
    
//通過(guò)訪問(wèn)this.props得到的值都會(huì)隨著父輩的變化而變化，
//這種情況首先要判斷這個(gè)變量到底是干嘛的：1，是不是屬于這個(gè)組建的； 2，是不是在這個(gè)組建里要改變的
//如果form這個(gè)值對(duì)于A這個(gè)組建來(lái)說(shuō)只是處于顯示作用，那么就取this.props.form.name，
//如果form這個(gè)值對(duì)于A這個(gè)組建來(lái)說(shuō)不只是處于顯示作用，比如是需要改變的，而且有個(gè)初始值，那么就在
//construct的時(shí)候給他附一個(gè)父輩的初始值（this.state={form:this.props.form}），并在render中使
//用this.state.form.name

2017年1月16日 06:27