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)
Invoked when a component receives a new props or state, return true will update dom (using diff algorithm updates), return false prevents updates (do not call render)
componentWillUpdata(nextProps, nextState)
Is not called when the component is loaded only when called in the component to be updated, then you can modify the state
render()
react most important steps to create a virtual dom, were diff algorithm update dom trees in this
componentDidUpdate()
It is not called when the component is loaded component updates after the completion of call
2.3, Unmounting (unloading phase: relates to a hook function)
componentWillUnmount()
After rendering component calls, calls only once
2.4, the life cycle of the function code sample
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, new life cycle
3.1, Mounting (load phase: 4 relates hook function)
constructor()
When called once loaded, it can be initialized state
static getDerivedStateFromProps(props, state)
Rerender assembly each time when, after the assembly constructed comprising (after the virtual dom, prior to the actual loading dom), each acquiring a new state or after props; after each received props will return a new object as a new state or null instructions necessary to update the State; with componentDidUpdate, may cover all the usage componentWillReceiveProps
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
3.2, Updating (update phase: involving 5 hook function)
static getDerivedStateFromProps(props, state)
Rerender assembly each time when, after the assembly constructed comprising (after the virtual dom, prior to the actual loading dom), each acquiring a new state or after props; after each received props will return a new object as a new state or null instructions necessary to update the State; with componentDidUpdate, may cover all the usage componentWillReceiveProps
shouldComponentUpdate(nextProps, nextState)
Invoked when a component receives a new props or state, return true will update dom (using diff algorithm updates), return false prevents updates (do not call render)
render()
react most important steps to create a virtual dom, were diff algorithm update dom trees in this
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; - Added
getDerivedStateFromProps,getSnapshotBeforeUpdateinstead of the three abandoned hook functioncomponentWillMount(componentWillReceivePorps,componentWillUpdate, ); - React16 not delete these three hook function, but can not add a hook function (
getDerivedStateFromProps, )getSnapshotBeforeUpdatemix,React17will be deletedcomponentWillMount,componentWillReceivePorps,componentWillUpdate; - Added handling of errors (componentDidCatch)
