场景

一、统计点击次数

---

准备 需要用到的生命周期为componentDidMount、componentDidUpdate

理解 React 中componentDidMount 只是在初始化执行一次，后续状态的变更不会触发componentDidMount。因此，有时候我们需要做一件事情，要在componentDidMount和componentDidUpdate中都写一遍。这样就可以保证初始化和更新都可以执行

语法

import React from 'react';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            num: 1,
        };
    }

    componentDidMount() {
        console.log(`按钮点击了 ${this.state.num} 次`);
    }

    componentDidUpdate() {
        console.log(`按钮点击了 ${this.state.num} 次`);
    }

    add() {
        const num = this.state.num + 1;
        this.setState(() => ({num}));
    }

    render() {
        return (
            <div>
                <h3>{this.state.num}</h3>
                <button type="button" onClick={() => this.add()}>
                    增加
                </button>
            </div>
        );
    }
}

export default App;

对比 React Hooks 写法

二、管理事件监听

---

准备 需要用到的生命周期为 componentDidMount、componentWillUnmount

理解 componentDidMount 中注册事件监听, componentWillMount 移除事件监听

语法

import React from 'react';

class App extends React.Component {
    componentDidMount() {
        window.addEventListener('resize', this.foo);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.foo);
    }

    foo() {
        console.log('管理事件监听');
    }

    render() {
        return (
            <div>
                <h3>管理事件监听</h3>
            </div>
        );
    }
}

export default App;

对比 React Hooks 写法