在不插入其他对象的情况下更新useState

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

function ExampleComponent() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  // 初始化 ref 的值
  useEffect(() => {
    countRef.current = count;
  }, [count]);

  const handleUpdateWithoutRender = () => {
    // 使用函数式更新
    setCount(prevCount => {
      const newCount = prevCount + 1;
      // 更新 ref 的值
      countRef.current = newCount;
      return prevCount; // 返回旧值以避免重新渲染
    });
  };

  return (
    <div>
      <p>Count (with render): {count}</p>
      <p>Count (without render): {countRef.current}</p>
      <button onClick={handleUpdateWithoutRender}>Update without Render</button>
    </div>
  );
}

export default ExampleComponent;