Three stages of the life cycle of components
- Mounting (loading stage)
- Updating (update phase)
- Unmounting (unloading phase)
The old life cycle
Mounting (loading phase: relates hook function 6)
constructor()
加载的时候调用一次，可以初始化state复制代码getDefaultProps()
设置默认的props，也可以用dufaultProps设置组件的默认属性。复制代码getInitialState ()
初始化state，可以直接在constructor中定义this.state复制代码componentWillMount()
组件加载时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state复制代码render()
react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行复制代码componentDidMount()
组件渲染之后调用，只调用一次复制代码Updating (update phase: involving 5 hook function)
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()
组件加载时不调用，组件更新完成后调用复制代码Unmounting (unloading phase: involving a hook function)
componentWillUnmount()
组件渲染之后调用，只调用一次
复制代码The basic components of writing
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() { // 组件卸载时触发
}
}复制代码New life cycle
Mounting (loading phase: 4 relates hook function)
constructor()
加载的时候调用一次，可以初始化state复制代码static getDerivedStateFromProps(props, state)
组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法复制代码render()
react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行复制代码componentDidMount()
组件渲染之后调用，只调用一次复制代码Updating (update phase: involving 5 hook function)
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, 可以覆盖componentWillUpdate的所有用法复制代码componentDidUpdate()
组件加载时不调用，组件更新完成后调用复制代码Unmounting (unloading phase: involving a hook function)
组件渲染之后调用，只调用一次复制代码Error Handling (Error Handling)
componentDidCatch(error，info)
任何一处的javascript报错会触发复制代码The basic components of writing
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() { // 组件卸载时触发
}
}复制代码to sum up
The old life cycle of
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)
Reproduced in: https: //juejin.im/post/5cfe5b85e51d45775a7002f1