7.React组件与生命

一、父子组件之间的传值：

1.子组件通过this.props的属性，接受从父组件传递过来的值

//父组件中

<TodoItem 
    content={value} 
    key={index} 
    index={index}
    deleteFunction={this.handleItemClick}
/>

//子组件中
return (
   //子组件通过this.props的属性，从父组件接受传递过来的值
   <li 
       onClick={this.handleItemClick}
   >
       {this.props.content}
   </li>
        )

2.子组件和父组件通信， 它要调用父组件传递过来的值

//父组件中

<TodoItem 
    content={value} 
    key={index} 
    index={index}
    deleteFunction={this.handleItemClick}
/>

handleItemClick(){
        //改变父组件中的数据
        //子组件想要和父组件通信，它要调用父组件传递过来的值
        this.props.deleteFunction(this.props.index)
    }

二、State、props与render函数

当组件初次创建的时候，render函数会被执行一次，当state数据发生变更的时候，render函数会被重新执行，当props数据发生变更的时候，render函数会被重新执行。

三、React中ref的使用

ref写在html标签上，获取的是dom节点，写在组件标签上，获取的是组件的js实例。

<button ref={(button)=>{this.buttonElem=button}}></button>
<Child ref={(Child)=>{this.ChildElem=Child}} />

四、React中的生命周期函数

1.生命周期函数值指的是组件在某一时刻会自动执行的函数。 

2.生命周期函数

//挂载前自动执行
componentWillMount(){}

//渲染时自动执行
render(){}

//挂载后自动执行
componentDidMount(){}

//组件更新前自动执行
shouldComponentUpdate(){}

//组件更新前 shouldComponentUpdate之后  自动执行
componentWillUpdate(){}

//组件更新前 render 自动执行
componentDidUpdate(){}


//组件从页面中移出前自动执行
componentWillUnmount(){}