关于useEffect

71 阅读1分钟

useEffect呢,只能返回一个函数,用于清除副作用(返回一个值会报错喔“destroy is not a function”),执行时机呢有两个:

第一个是组件卸载时(从DOM上移除)

第二是下一次 useEffect 执行之前(当依赖项发生变化,导致 useEffect 的回调函数被重新调用之前,上一次注册的清除函数会被先调用,以确保旧的副作用被清理),示例代码如下

import {useEffect,useState} from 'react'

export default function App() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log(`Count: ${count}`);
        return () => {
            console.log('Cleanup previous effect'+count);
        };
    }, [count]);

    const incrementCount = () => {
        setCount(count + 1);
    };

    return (
        <div>
            <button onClick={incrementCount}>Increment</button>
        </div>
    );
}