react hooks 闭包问题

问题：值没有发生变化，一直为0

案例：

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

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

  useEffect(() => {
    setInterval(() => {
      console.log("打印数据值：", count);
    }, 2000);
  }, []);

  return (
    <div>
      count: {count}
      <br />
      <button onClick={() => setCount((val) => val + 5)}>每次加 5</button>
    <div/>
  );
};

解决方案一：

可以给 useEffect ()设置依赖重新执行函数拿到新值

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

  useEffect(() => {
    setInterval(() => {
      console.log("打印数据值：", count);
    }, 2000);
  }, [count]);
//添加count 为依赖数据

方案二：

使用 useRef :创建一个普通的js对象，每次渲染可返回一个可变的同一个ref对象，可拿到新值

const [count, setCount] = useState(0);
const newCount = useRef(count)
  useEffect(() => {
    setInterval(() => {
      console.log("打印数据值：", count);
    }, 2000);
  }, []);