react学习笔记-生命周期函数（4）

作者: wayne1125 | 来源:发表于2019-07-03 17:05 被阅读0次

react学习笔记-生命周期函数（4）
RN-生命周期函数（新）
React 生命周期函数
React的生命周期函数
04.React高级部分（中）
React Native 组件的生命周期
useState
React被废弃的三个生命周期函数及替代函数
Vue 生命周期函数
四：React 进阶三（生命周期）

4-8、React中的生命周期函数

生命周期

生命周期函数指某一个时刻组件会自动调用执行的函数

1）初始化（initialization）

初始化props and state中数据

2）挂载时（Mounting）

// 在组件即将被挂载到页面的时刻自动执行
componentWillMount() {
console.log('componentWillmount')
}
render （） {
console.log('render')
}
// 在组件被挂载到页面之后，自动执行
componentDidMount() {
console.log('componentDidmount')
}

3）更新时（Updation）

// 在组件更新之前，它会自动被执行
shouldComponentUpdate() {
console.log('shouldComponentUpdate')
return true
}
//组件被更新之前，它会自动执行，但是它在shouldComponentUpdate之后被执行
// 如果shouldComponentUpdate返回true它才执行
// 如果返回false，这个函数就不会执行了
componentWillUpdate () {
console.log('componentWillUpdate')
}
// 组件更新完成之后会被执行
componentDidUpdate () {
console.log('componentDidUpdate')
}

componentWillReceiveProps

//子组件中
// 1. 当一个组件从父组件接收参数
// 2. 如果这个组件第一次存在于父组件中，不会被执行
// 3. 如果这个组件之前已经存在于父组件中，才会执行
// 4. 满足2，3情况下只要父组件的render函数被重新执行了，子组件的这个生命周期函数就会被执行
componentWillReceiveProps() {
console.log('child componentWillReceiveProps')
}

4）组件卸载时（Unmounting）

//子组件中
// 当这个组件即将被从页面中剔除的时候会执行
componentWillUnmount () {
console.log('componentWillUnmount')
}

4-9、React生命周期的使用场景

避免子组件的重复执行

shouldComponentUpdate (nextProps,nextState) {
if(nextProps.content !== this.props.content){
return true
} else{
return false
}
}
// 发送ajax请求数据
componentWillMount() {
// console.log('componentWillmount')
axios.get('/api/test').then(() => {
console.log('axios get')
}).catch((error) => {
console.log('error',error)
})
}