react 的生命周期

Question

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

为啥我这里子组件初始化通过pros获取父组件数据
当我子组件调用父组件事件改变数据后 子组件的值
name还能被改变 初始化方法不是只执行一次么

当我有两个组件A 和 B A组件调用父组件方法 父组件数据改变
触发B组件数据更新操作时 A组件按上面的写法 数据正常传递
B组件不行 B组件通过componentWillReceiveProps（）方法才可更新数据

 
父组件
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{
      调用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>
          )
      }
  }
    
    
    

Answer 1

父组件通过props传递数据给子组件，props变化，子组件获取到的数据也会变化的，有个属性变化的函数可以侦测到

Answer 2

React有三个阶段：挂载、更新和卸载。

挂载的声明周期主要有：

• constructor
• render
• componentDidMount

其中constructor里把父组件传递的props绑定到子组件的this上。

如果调用父组件传递的回调函数来改变数据，那么父组件传递的props会出现变化
此时触发子组件的更新阶段：

• componentWillReceiveProps
• shouldComponentUpdate
• render
• componentDidUpdate。

当我子组件调用父组件事件改变数据后 子组件的值name还能被改变

我对你说的这句话里的改变，理解是页面中展示的数据变了。而控制页面展示变化的是render生命周期，上文中可以看到不管是挂载还是更新，都会触发render。

Answer 3

constructor(props) {
        super(props);
        this.state = {
            form:this.props.form //需要在本组建进行改变的话就赋值给本组建自己的state，
            //只是展示作用的话就不要初始化这个state
        };
    }
    
    <p>{this.props.form.name}</p>{/*对于本组建只是展示作用*/}
    <p>{this.state.form.name}</p>{/*在本组建内会对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
    

Answer 4

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

試試可否?

Answer 5

就不能打个react的标签？