带回调的React闭包

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

function MyComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    const intervalId = setInterval(() => {
      // 使用myRef.current访问DOM节点
    }, 1000);

    return () => {
      clearInterval(intervalId); // 清除定时器
    };
  }, []); // 空依赖数组确保只在组件挂载和卸载时执行

  return <div ref={myRef}>Hello World</div>;
}

import React, { useState, useCallback } from 'react';

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

  const handleClick = useCallback(() => {
    console.log(count); // 这里会打印最新的count值
    setCount(count + 1);
  }, [count]); // 依赖于count，确保每次count变化时都重新创建回调函数

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}