react生命周期

react生命周期

1. 初始化阶段 Initialization
2. 挂载阶段 Mounting
3. 更新阶段[props,state]更新阶段，不能修改state的值
4. 卸载阶段

React	生命周期
初始化阶Initialization	初始化阶段,加载阶段，由jsx转换成真实DOM
挂载阶段 Mounting	挂载阶段，三个函数 componentWillMount render componentDidMount
更新阶段 Updation	更新阶段，props state
卸载阶段 Unmounting	销毁阶段，componentWillUnmount

• ==组件挂载阶段==

函数	挂载阶段Mounting
componentWillMount	组件将要挂载，此函数直接执行
render	在组件将要挂载之后，组件挂载完成之前执行的函数，也就是执行完后，执行组件挂载完成函数
componentDidMount	组件挂载完成。可以在这里请求数据

• ==组件更新阶段Updation==

props,state	更新阶段说明
componentWillReceiveProps	==props==属性才具有此函数阶段，有两个参数，第一个是父组件通过props传来的，第二个是子组件自身的属性或者state数据
shouldComponentUpdate(np,ns)	return true 将数据更新，组件重新加载渲染，为false时，数据变化，但组件不重新渲染
componentWillUpdate	组件将要更新
render	在更新完成之前，重新渲染页面，加载组件
componentDidUpdate	组件更新完成之后的函数

• ==销毁组件==

Unmounting	组件销毁
componentWillUnmount	组件销毁，当组件销毁时，执行此函数，组件销毁后，display:none的性质

• 销毁组件也可以这样做
  ==ReactDom.unmountComponentAtNode(document.getElementById(‘app’)==

1.生命周期整体流程–实例化

• getDefaultProps 取得默认属性
• getlnitialState 初始化阶段
• componentWillMount 即将进入dom
• render 描绘dom
• componentDidMount 已经进入dom

通过ref来拿到dom节点里的内容

render(){
    return <h3 ref='txt'>这里是内容</h3>
}
componentWillMount(){
    console.log(this.refs.txt.innerHTML) //这里是拿不到的
} 
componentDidMount(){
    console.log(this.refs.txt.innerHTML) //可以拿到
}