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>);
}
``