关于React组件⽣命周期函数的详解
1、⽣命周期的概念
1.1、概念
在组件创建、组件属性更新、组件被销毁的过程中，总是伴随着各种各样的函数执⾏，这些在组件特定时期，被触发执⾏的函数，统称为组件的⽣命周期函数。
1.2、组件⽣命周期三个阶段
1. 加载阶段（Mounting）：在组件初始化时执⾏，有⼀个显著的特点：创建阶段⽣命周期函数在组件的⼀辈⼦中只执⾏⼀次；
2. 更新阶段（Updating）：属性和状态改变时执⾏，根据组件的state和props的改变，有选择性的触发0次或多次；
3. 卸载阶段（Unmounting）：在组件对象销毁时执⾏，⼀辈⼦只执⾏⼀次；
2、旧的⽣命周期
2.1、Mounting（加载阶段：涉及6个钩⼦函数）
constructor()
加载的时候调⽤⼀次，可以初始化state
getDefaultProps()
设置默认的props，也可以⽤dufaultProps设置组件的默认属性。
getInitialState()
初始化state，可以直接在constructor中定义this.state
componentWillMount()
组件加载时只调⽤，以后组件更新不调⽤，整个⽣命周期只调⽤⼀次，此时可以修改state
render()
react最重要的步骤，创建虚拟dom，进⾏diff算法，更新dom树都在此进⾏
componentDidMount()
组件渲染之后调⽤，只调⽤⼀次
2.2、Updating（更新阶段：涉及5个钩⼦函数)
componentWillReceivePorps(nextProps)
组件加载时不调⽤，组件接受新的props时调⽤
shouldComponentUpdate(nextProps, nextState)
组件接收到新的props或者state时调⽤，return true就会更新dom（使⽤diff算法更新），return false能阻⽌更新（不调⽤render）componentWillUpdata(nextProps, nextState)
组件加载时不调⽤，只有在组件将要更新时才调⽤，此时可以修改state
render()
react最重要的步骤，创建虚拟dom，进⾏diff算法，更新dom树都在此进⾏
componentDidUpdate()
组件加载时不调⽤，组件更新完成后调⽤
2.3、Unmounting（卸载阶段：涉及1个钩⼦函数）
componentWillUnmount()
组件渲染之后调⽤，只调⽤⼀次
2.4、⽣命周期函数代码⽰例
import React, { Component } from 'react'
export default class OldReactComponent extends Component {
constructor(props) {
super(props)
// getDefaultProps：接收初始props
// getInitialState：初始化state
}
state = {
}
componentWillMount() { // 组件挂载前触发
}
render() {
return (
<h2>Old React.Component</h2>
)
}
componentDidMount() { // 组件挂载后触发
}
componentWillReceivePorps(nextProps) { // 接收到新的props时触发
}
shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发，true：更新，false：不更新
return true
}
componentWillUpdate(nextProps, nextState) { // 组件更新前触发
}
componentDidUpdate() { // 组件更新后触发
}
componentWillUnmount() { // 组件卸载时触发
}
}
3、新的⽣命周期
3.1、Mounting（加载阶段：涉及4个钩⼦函数）
constructor()
加载的时候调⽤⼀次，可以初始化state
static getDerivedStateFromProps(props, state)
组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回⼀个对象作为新的
state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有⽤法
render()
react最重要的步骤，创建虚拟dom，进⾏diff算法，更新dom树都在此进⾏
componentDidMount()
组件渲染之后调⽤，只调⽤⼀次
3.2、Updating（更新阶段：涉及5个钩⼦函数)
static getDerivedStateFromProps(props, state)
组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回⼀个对象作为新的
state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有⽤法
shouldComponentUpdate(nextProps, nextState)
组件接收到新的props或者state时调⽤，return true就会更新dom（使⽤diff算法更新），return false能阻⽌更新（不调⽤render）
render()
react最重要的步骤，创建虚拟dom，进⾏diff算法，更新dom树都在此进⾏
getSnapshotBeforeUpdate(prevProps, prevState)
触发时间: update发⽣的时候，在render之后，在组件dom渲染之前；返回⼀个值，作为componentDidUpdate的第三个参数；配合componentDidUpdate, 可以覆盖
react router详解和用法componentWillUpdate的所有⽤法
componentDidUpdate()
组件加载时不调⽤，组件更新完成后调⽤
3.3、Unmounting（卸载阶段：涉及1个钩⼦函数）
componentWillUnmount()
组件渲染之后调⽤，只调⽤⼀次
3.4、Error Handling(错误处理)
componentDidCatch(error，info)
任何⼀处的javascript报错会触发
3.5、新⽣命周期函数代码⽰例
import React, { Component } from 'react'
export default class NewReactComponent extends Component {
constructor(props) {
super(props)
// getDefaultProps：接收初始props
// getInitialState：初始化state
}
state = {
}
static getDerivedStateFromProps(props, state) { // 组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；；每次接收新的props之后都会返回⼀个对象作为新的state，返回null则说明 return state
}
componentDidCatch(error, info) { // 获取到javascript错误
}
render() {
return (
<h2>New React.Component</h2>
)
}
componentDidMount() { // 挂载后
}
shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发，true：更新，false：不更新
return true
}
getSnapshotBeforeUpdate(prevProps, prevState) { // 组件更新前触发
}
componentDidUpdate() { // 组件更新后触发
}
componentWillUnmount() { // 组件卸载时触发
}
}
4、总结
旧的⽣命周期
新的⽣命周期
1. React16新的⽣命周期弃⽤了componentWillMount、componentWillReceivePorps，componentWillUpdate；
2. 新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃⽤的三个钩⼦函数（componentWillMount、componentWillReceivePorps，componentWillUpdate）；
3. React16并没有删除这三个钩⼦函数，但是不能和新增的钩⼦函数（getDerivedStateFromProps、getSnapshotBeforeUpdate）混⽤，React17将会删
除componentWillMount、componentWillReceivePorps，componentWillUpdate；
4. 新增了对错误的处理（componentDidCatch）
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论