React学习笔记五——组件的生命周期

更改状态( setState() )时按顺序触发的钩子函数

1. shouldComponentUpdate–组件是否更新

2. componentWillUpdate–组件将更新

3. render–页面渲染

4. componentDidUpdate–组件已更新

强制更改( forceUpdate() )时按顺序触发的钩子函数

1. componentWillUpdate–组件将更新

2. render–页面渲染

3. componentDidUpdate–组件已更新

组件接受props时按顺序触发的钩子函数

1. componentWillReceiveProps–组件将接收props

2. shouldComponentUpdate–组件是否更新

3. componentWillUpdate–组件将更新

4. render–页面渲染

5. componentDidUpdate–组件已更新

卸载时触发的钩子函数

1. componenetWillUnmount–组件将卸载

延申知识点：通过setState()更改状态，但不重新渲染页面？

shouldComponentUpdate(){

return false

}

//此钩子函数返回false后，即使通过setState()更改状态，走到该函数时就结束了，

//不会再往下执行，故不会执行render()函数，页面也不会被重新渲染

组件的生命周期（新）

=========================================================================

更改生命周期背景

React团队一直致力于实现异步渲染，探索中发现以下三个生命周期钩子经常会被误解和滥用；预计在异步渲染中，它们的潜在误用问题可能更大，因此会影响效率和性能，所以在新版本中为这些生命周期添加 “UNSAFE_” 前缀，（这里的 “unsafe” 不是指安全性，而是表示使用这些生命周期的代码在 React 的未来版本中更有可能出现 bug，尤其是在启用异步渲染之后。）

1.componentWillMount

2.componentWillReceiveProps

3.componentWillUpdate

PS:以上三个钩子函数目前在新版本中还可以使用但是要带上“UNSAFE_” 前缀；以后版本可能将会被弃用；

初始化挂载时按顺序触发的钩子函数

1. constructor–构造器

2. getDerivedStateFromProps

3. render–页面渲染

4. componenetDidMount–组件已挂载

更改状态( setState() )和组件接受props时按顺序触发的钩子函数

1. getDerivedStateFromProps

2. shouldComponentUpdate–组件是否更新

3. render–页面渲染

4. getSnapshotBeforeUpdate

5. componentDidUpdate–组件已更新

强制更改( forceUpdate() )时按顺序触发的钩子函数

1. getDerivedStateFromProps

2. render–页面渲染

3. getSnapshotBeforeUpdate

4. componentDidUpdate–组件已更新

卸载时触发的钩子函数

• componenetWillUnmount–组件将卸载

旧生命周期和新生命周期的区别

• 旧生命周期即将弃用三个生命周期钩子，分别是：componentWillMount、componentWillReceiveProps、componentWillUpdate