跳到主要内容

场景

2023年02月22日
柏拉文
越努力，越幸运

场景一、统计点击次数​

import React, {useState, useEffect} from 'react';

function App() {
    const [num, setNum] = useState<number>(0);
    useEffect(() => {
        console.log(`按钮点击了 ${num} 次`);
    }, [num]);
    const add = () => {
        setNum(() => num + 1);
    };
    return (
        <div>
            <h3>{num}</h3>
            <button type="button" onClick={add}>
                增加
            </button>
        </div>
    );
}

export default App;

对比 React Class 写法

场景二、管理事件监听​

import React, {useEffect} from 'react';

function App() {
    const foo = () => {
        console.log('管理事件监听');
    };
    useEffect(() => {
        window.addEventListener('resize', foo);
        return () => {
            window.removeEventListener('resize', foo);
        };
    }, []);

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

export default App;

对比 React Class 写法