HOOK!

原创

JediHongbin 2023-02-14 10:46:20 博主文章分类：react ©著作权

文章标签 reactjs 缓存 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者JediHongbin的原创作品，请联系作者获取转载授权，否则将追究法律责任

const [count, setCount] = useState<number>(0);

<Button onClick={handleIncrease}>increase{count}</Button>

// + 2  count为之前的值
const handleIncrease = useCallback(() => {
       setCount((prev) => prev + 1);
       console.log(count);  // 0
       setCount((prev) => prev + 1);
       console.log(count); // 0
   }, [count]);

// + 2 count一直被缓存为0
const handleIncrease = useCallback(() => {
       setCount((prev) => prev + 1);
       console.log(count);
       setCount((prev) => prev + 1);
       console.log(count);
   }, []);

// + 1
const handleIncrease = useCallback(() => {
       setCount(() => count + 1);
       console.log(count);
       setCount(() => count + 1);
       console.log(count);
   }, [count]);
   
// + 1
const handleIncrease = useCallback(() => {
       setCount(count + 1);
       console.log(count);
       setCount(count + 1);
       console.log(count);
   }, [count]);