React 组件的生命周期的三个状态：

Mounting : 挂载过程
Updating : 更新过程
Unmounting : 卸载过程

React 旧版

生命周期图谱

挂载 Mount

当组件实例被创建并插入 DOM 中时。

constructor : 初始化 state，为事件处理函数绑定实例。
componentWillMount : 在挂载之前被调用
render
componentDidMount : 会在组件挂载后立即调用。依赖于 DOM 节点的初始化、请求数据、添加订阅应该放在这里。

更新 Update

当组件的 props 或 state 发生变化时会触发更新。

componentWillReceiveProps : 接收到一个新的 props 时被调用触发,初始渲染不会调用此方法。
shouldComponentUpdate : 根据 shouldComponentUpdate() 的返回的 bool 值来决定是否重新渲染组件.
componentWillUpdate : 当组件收到新的 props 或 state 时，会在渲染之前调用初始渲染不会调用此方法。
render
componentDidUpdate : 会在更新后会被立即调用。首次渲染不会执行此方法。

卸载 Unmount

当组件从 DOM 中移除时会调用如下方法

componentWillUnmount : 会在组件卸载及销毁之前直接调用。

示例代码

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = { data:0 }
        console.log('Parent --- constructor');
    }
    componentWillMount() {
        console.log('Parent --- componentWillMount')
    }
    componentDidMount() {
        console.log('Parent --- componentDidMount')
    }
    componentWillReceiveProps(newProps) {
        console.log('Parent --- componentWillReceiveProps')
    }
    shouldComponentUpdate(newProps, newState) {
        console.log('Parent --- shouldComponentUpdate');
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        console.log('Parent --- componentWillUpdate');
    }
    componentDidUpdate(prevProps, prevState) {
        console.log('Parent --- componentDidUpdate')
    }
    setNewNumber = ()=>{
        this.setState({
            data: this.state.data + 1
        })
    }
    death = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }
    render() { 
        console.log('Parent --- render');
        return ( 
            <div>
                <button onClick={this.setNewNumber}>增加</button>
                <button onClick={this.death}>卸载</button>
                <Child myNumber={this.state.data}></Child>
            </div>
         );
    }
}

class Child extends React.Component {
    constructor(props){
        super(props)
        console.log('Child --- constructor');
    }
    componentWillMount() {
        console.log('Child --- componentWillMount')
    }
    componentDidMount() {
        console.log('Child --- componentDidMount')
    }
    componentWillReceiveProps(newProps) {
        console.log('Child --- componentWillReceiveProps')
    }
    shouldComponentUpdate(newProps, newState) {
        console.log('Child --- shouldComponentUpdate');
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        console.log('Child --- componentWillUpdate');
    }
    componentDidUpdate(prevProps, prevState) {
        console.log('Child --- componentDidUpdate')
    }
    componentWillUnmount() {
        console.log('Child --- componentWillUnmount')
    }
    render() {
        console.log('Child --- render');
        return (
            <div>
                <h3>{this.props.myNumber}</h3>
            </div>
        );
    }
}

React 新版

生命周期图谱

即将废弃

componentWillMount ——> UNSAFE_componentWillMount
componentWillReceiveProps ——> UNSAFE_componentWillReceiveProps
componentWillUpdate ——> UNSAFE_componentWillUpdate

新增

static getDerivedStateFromProps
getSnapshotBeforeUpdate

组件挂载 Mount

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

constructor : 初始化 state，为事件处理函数绑定实例。
static getDerivedStateFromProps : 返回一个状态对象或者null
render
componentDidMount : 会在组件挂载后立即调用。依赖于 DOM 节点的初始化、请求数据、添加订阅应该放在这里。

更新 Update

当组件的 props 或 state 发生变化时会触发更新。

static getDerivedStateFromProps : 返回一个状态对象或者null
shouldComponentUpdate : 根据 shouldComponentUpdate() 的返回的 bool 值来决定是否重新渲染组件
render
getSnapshotBeforeUpdate : 返回一个 snapshot 或者 null
componentDidUpdate : 会在更新后会被立即调用。首次渲染不会执行此方法。

卸载 Unmount

当组件从 DOM 中移除时会调用如下方法

componentWillUnmount : 会在组件卸载及销毁之前直接调用。

示例代码

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = { data: 0 }
        console.log('Parent --- constructor');
    }
    static getDerivedStateFromProps(props, state) {
        console.log('Parent --- getDerivedStateFromProps', props, state);
        return null;
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log('Parent --- getSnapshotBeforeUpdate', prevProps, prevState);
        return null
    }
    componentDidMount() {
        console.log('Parent --- componentDidMount')
    }
    shouldComponentUpdate(newProps, newState) {
        console.log('Parent --- shouldComponentUpdate');
        return true;
    }
    componentDidUpdate(prevProps, prevState) {
        console.log('Parent --- componentDidUpdate')
    }
    setNewNumber = () => {
        this.setState({
            data: this.state.data + 1
        })
    }
    death = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }
    render() {
        console.log('Parent --- render');
        return (
            <div>
                <button onClick={this.setNewNumber}>增加</button>
                <button onClick={this.death}>卸载</button>
                <Child myNumber={this.state.data}></Child>
            </div>
        );
    }
}
class Child extends React.Component {
    constructor(props){
        super(props)
        this.state = {}
        console.log('Child --- constructor');
    }
    static getDerivedStateFromProps(props, state) {
        console.log('Child --- getDerivedStateFromProps', props, state);
        return null;
    }
    componentDidMount() {
        console.log('Child --- componentDidMount')
    }
    shouldComponentUpdate(newProps, newState) {
        console.log('Child --- shouldComponentUpdate');
        return true;
    }
    componentDidUpdate(prevProps, prevState) {
        console.log('Child --- componentDidUpdate')
    }
    componentWillUnmount() {
        console.log('Child --- componentWillUnmount')
    }

    render() {
        console.log('Child --- render');
        return (
            <div>
                <h3>{this.props.myNumber}</h3>
            </div>
        );
    }
}

React

React 生命周期

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

React组件通信方式上一篇

瀑布流实现下一篇

1	`class Parent extends Component {`
2	`constructor(props) {`
3	`super(props);`
4	`this.state = { data:0 }`
5	`console.log('Parent --- constructor');`
6	`}`
7	`componentWillMount() {`
8	`console.log('Parent --- componentWillMount')`
9	`}`
10	`componentDidMount() {`
11	`console.log('Parent --- componentDidMount')`
12	`}`
13	`componentWillReceiveProps(newProps) {`
14	`console.log('Parent --- componentWillReceiveProps')`
15	`}`
16	`shouldComponentUpdate(newProps, newState) {`
17	`console.log('Parent --- shouldComponentUpdate');`
18	`return true;`
19	`}`
20	`componentWillUpdate(nextProps, nextState) {`
21	`console.log('Parent --- componentWillUpdate');`
22	`}`
23	`componentDidUpdate(prevProps, prevState) {`
24	`console.log('Parent --- componentDidUpdate')`
25	`}`
26	`setNewNumber = ()=>{`
27	`this.setState({`
28	`data: this.state.data + 1`
29	`})`
30	`}`
31	`death = () => {`
32	`ReactDOM.unmountComponentAtNode(document.getElementById('root'))`
33	`}`
34	`render() {`
35	`console.log('Parent --- render');`
36	`return (`
37	`<div>`
38	`<button onClick={this.setNewNumber}>增加</button>`
39	`<button onClick={this.death}>卸载</button>`
40	`<Child myNumber={this.state.data}></Child>`
41	`</div>`
42	`);`
43	`}`
44	`}`
45
46	`class Child extends React.Component {`
47	`constructor(props){`
48	`super(props)`
49	`console.log('Child --- constructor');`
50	`}`
51	`componentWillMount() {`
52	`console.log('Child --- componentWillMount')`
53	`}`
54	`componentDidMount() {`
55	`console.log('Child --- componentDidMount')`
56	`}`
57	`componentWillReceiveProps(newProps) {`
58	`console.log('Child --- componentWillReceiveProps')`
59	`}`
60	`shouldComponentUpdate(newProps, newState) {`
61	`console.log('Child --- shouldComponentUpdate');`
62	`return true;`
63	`}`
64	`componentWillUpdate(nextProps, nextState) {`
65	`console.log('Child --- componentWillUpdate');`
66	`}`
67	`componentDidUpdate(prevProps, prevState) {`
68	`console.log('Child --- componentDidUpdate')`
69	`}`
70	`componentWillUnmount() {`
71	`console.log('Child --- componentWillUnmount')`
72	`}`
73	`render() {`
74	`console.log('Child --- render');`
75	`return (`
76	`<div>`
77	`<h3>{this.props.myNumber}</h3>`
78	`</div>`
79	`);`
80	`}`
81	`}`

1	`class Parent extends Component {`
2	`constructor(props) {`
3	`super(props);`
4	`this.state = { data: 0 }`
5	`console.log('Parent --- constructor');`
6	`}`
7	`static getDerivedStateFromProps(props, state) {`
8	`console.log('Parent --- getDerivedStateFromProps', props, state);`
9	`return null;`
10	`}`
11	`getSnapshotBeforeUpdate(prevProps, prevState) {`
12	`console.log('Parent --- getSnapshotBeforeUpdate', prevProps, prevState);`
13	`return null`
14	`}`
15	`componentDidMount() {`
16	`console.log('Parent --- componentDidMount')`
17	`}`
18	`shouldComponentUpdate(newProps, newState) {`
19	`console.log('Parent --- shouldComponentUpdate');`
20	`return true;`
21	`}`
22	`componentDidUpdate(prevProps, prevState) {`
23	`console.log('Parent --- componentDidUpdate')`
24	`}`
25	`setNewNumber = () => {`
26	`this.setState({`
27	`data: this.state.data + 1`
28	`})`
29	`}`
30	`death = () => {`
31	`ReactDOM.unmountComponentAtNode(document.getElementById('root'))`
32	`}`
33	`render() {`
34	`console.log('Parent --- render');`
35	`return (`
36	`<div>`
37	`<button onClick={this.setNewNumber}>增加</button>`
38	`<button onClick={this.death}>卸载</button>`
39	`<Child myNumber={this.state.data}></Child>`
40	`</div>`
41	`);`
42	`}`
43	`}`
44	`class Child extends React.Component {`
45	`constructor(props){`
46	`super(props)`
47	`this.state = {}`
48	`console.log('Child --- constructor');`
49	`}`
50	`static getDerivedStateFromProps(props, state) {`
51	`console.log('Child --- getDerivedStateFromProps', props, state);`
52	`return null;`
53	`}`
54	`componentDidMount() {`
55	`console.log('Child --- componentDidMount')`
56	`}`
57	`shouldComponentUpdate(newProps, newState) {`
58	`console.log('Child --- shouldComponentUpdate');`
59	`return true;`
60	`}`
61	`componentDidUpdate(prevProps, prevState) {`
62	`console.log('Child --- componentDidUpdate')`
63	`}`
64	`componentWillUnmount() {`
65	`console.log('Child --- componentWillUnmount')`
66	`}`
67
68	`render() {`
69	`console.log('Child --- render');`
70	`return (`
71	`<div>`
72	`<h3>{this.props.myNumber}</h3>`
73	`</div>`
74	`);`
75	`}`
76	`}`

React的生命周期

React 旧版

挂载 Mount

更新 Update

卸载 Unmount

示例代码

React 新版

即将废弃

新增

组件挂载 Mount

更新 Update

卸载 Unmount

示例代码