React-useEffect的闭包陷阱(stale closure)

React-useEffect的闭包陷阱(stale closure)

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

/**
 *  c1 始终为1
 *  c2 为从1开始的递增最新值
 * c2 1
 * c1 1
 * c2 2
 * c1 1
 * c2 3
 * c1 1	
 */
export default function EffectTest(){
    const [c, setC] = useState(1);
    const buttonRef = useRef(null);
    useEffect(() => {
        buttonRef.current.addEventListener('click', () => {
            setC((value) => {
                console.log('c2', value);
                return value + 1;
            });
            console.log('c1', c);
        });
    }, []);

    return (
        <div>
            <button ref={buttonRef} >addC</button>
        </div>
    );
}
``