1, the concept of life-cycle
1.1, the concept of
In the components to create, update component properties, the component is destroyed in the process, always accompanied by a variety of functions to perform these components in a specific period, triggered the function performed, collectively referred to as a function of the life cycle of components.
1.2, component life cycle in three stages
-
Loading phase (Mounting): perform the component initialization, there is a notable feature: Create a lifecycle function is executed only once in a lifetime assembly;
-
Update Stage (Updating): perform a property and state changes according to the change of state and assembly props, selective triggering 0 or more times;
- Unloading phase (Unmounting): executed when the Component Object destroyed lifetime executed only once;
2, the old life cycle
2.1, Mounting (load phase: relates hook function 6)
constructor()
When called once loaded, it can be initialized state
getDefaultProps()
Set default props, can also use the default properties dufaultProps the component.
getInitialState ()
Initialization state, may be defined directly in the constructor of this.state
componentWillMount()
Only called when the component is loaded, after the component update is not called, the entire life cycle called only once, then you can modify the state
render()
react most important steps to create a virtual dom, were diff algorithm update dom trees in this
componentDidMount()
After rendering component calls, calls only once
2.2, Updating (update phase: involving 5 hook function)
componentWillReceivePorps(nextProps)
When the call is not invoked when the component is loaded, the component accept the new 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)
Trigger Time: time update occurred after the render, before the component rendering dom; return a value, as componentDidUpdate third parameter; with componentDidUpdate, can cover all usage componentWillUpdate
componentDidUpdate()
It is not called when the component is loaded component updates after the completion of call
3.3, Unmounting (unloading phase: relates to a hook function)
componentWillUnmount()
After rendering component calls, calls only once
3.4, Error Handling (Error Handling)
componentDidCatch(error，info)
javascript error in any one of the triggers
3.5, the new lifecycle function code sample
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则说明不需要更新state
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, summary
The old life cycle
New life cycle
- React16 new lifecycle abandoned componentWillMount, componentWillReceivePorps, componentWillUpdate
- Three new hook function getDerivedStateFromProps, getSnapshotBeforeUpdate instead abandoned (componentWillMount, componentWillReceivePorps, componentWillUpdate)
- React16 not delete these three hook function, but can not add a hook function (getDerivedStateFromProps, getSnapshotBeforeUpdate) mix, React17 will delete componentWillMount, componentWillReceivePorps, componentWillUpdate
- Added handling of errors (componentDidCatch)