在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ react 的生命周期

react 的生命周期

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

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

當我有兩個組件A 和 B A組件調(diào)用父組件方法 父組件數(shù)據(jù)改變
觸發(fā)B組件數(shù)據(jù)更新操作時 A組件按上面的寫法 數(shù)據(jù)正常傳遞
B組件不行 B組件通過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里不會改變
        };
    }
    componentWillReceiveProps(nextProps){
        這里可以
    }
   
      render(){
          return (
              <p>{that.state.show?'展示':'隱藏'}</p>
          )
      }
  }
    
    
    
回答
編輯回答
傲嬌范

React有三個階段:掛載、更新和卸載。

掛載的聲明周期主要有:

  • constructor
  • render
  • componentDidMount

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

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

  • componentWillReceiveProps
  • shouldComponentUpdate
  • render
  • componentDidUpdate。
當我子組件調(diào)用父組件事件改變數(shù)據(jù)后 子組件的值name還能被改變

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

2018年6月5日 05:52
編輯回答
脾氣硬

就不能打個react的標簽?

2018年4月29日 05:50
編輯回答
萢萢糖

父組件通過props傳遞數(shù)據(jù)給子組件,props變化,子組件獲取到的數(shù)據(jù)也會變化的,有個屬性變化的函數(shù)可以偵測到

2017年2月8日 17:41
編輯回答
萢萢糖

純看程式
小弟認為是因為 B組件 constructork 的部分只有在一開始render的時候作用了一次
因此
B組件內(nèi)的state 的show 一直都只一開始的 props.show
若你要用A組件的按鈕 父組件的方法 去改 B組件的屬性
B組件內(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 //需要在本組建進行改變的話就賦值給本組建自己的state,
            //只是展示作用的話就不要初始化這個state
        };
    }
    
    <p>{this.props.form.name}</p>{/*對于本組建只是展示作用*/}
    <p>{this.state.form.name}</p>{/*在本組建內(nèi)會對form進行更改*/}
    
//通過訪問this.props得到的值都會隨著父輩的變化而變化,
//這種情況首先要判斷這個變量到底是干嘛的:1,是不是屬于這個組建的; 2,是不是在這個組建里要改變的
//如果form這個值對于A這個組建來說只是處于顯示作用,那么就取this.props.form.name,
//如果form這個值對于A這個組建來說不只是處于顯示作用,比如是需要改變的,而且有個初始值,那么就在
//construct的時候給他附一個父輩的初始值(this.state={form:this.props.form}),并在render中使
//用this.state.form.name
    
2017年1月16日 06:27