React生命周期函数详细解析

一.react生命周期函数
1.constructor --> 01构造函数
2.componentWillMount --> 02组件将要挂载
3.render --> 03数据将要渲染
4.componentDidMount --> 04组件挂载完成
代码

页面加载完成控制台打印的数据

5.componentWillUnmount --> 组件销毁的时候触发的生命周期函数
父组件代码（控制子组件代码销毁创建）

子组件代码

点击父组件app '挂载和销毁生命周期函数组件’按钮
点击之前

点击之后

以上是生命周期函数

二.组件更新数据触发的函数
1.shouldComponentUpdate --> 001是否需要更新数据 return true 需要 return false 不需要
2.componentWillUpdate --> 002组件将要更新数据
3.render -->03数据将要渲染
4.componentDidUpdate -->004组件更新完成数据
代码

点击 ‘改变数据’ 按钮后效果

三：ps 父组件改变props传值的时候触发的函数 componentWillReceiveProps
1.父组件代码

子组件代码

点击 ‘改变父组件title的值’ 按钮触发

注意 shouldComponentUpdate（这个也是在组件更新后触发的函数）函数有两个参数
是否需要更新数据 return true 需要 return false 不需要
shouldComponentUpdate(nextProps,nextState){
console.log(‘001shouldComonentUpdata’)
console.log(‘nextProps’,nextProps) //父组件改变后的数据
console.log(‘nextState’,nextState)//子组件改变后的数据
return true
}