React class组件和hooks setState异步更新数据详解

import React, { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  // 使用 useRef 来保存可变的计数器状态
  const latestCount = useRef(count);
 
  useEffect(() => {
    // 更新最新的状态值
    latestCount.current = count;
  });
 
  const asyncIncrement = () => {
    setTimeout(() => {
      // 读取最新的状态值
      setCount(latestCount.current + 1);
    }, 1000);
  };
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={asyncIncrement}>异步增加</button>
    </div>
  );
}
 
export default Counter;

这段代码使用了React的函数组件和hooks API来实现一个计数器功能。它展示了如何使用useRef来保存一个可以在组件的整个生命周期内更新的状态值，并且展示了如何在异步函数中正确地使用这个状态值。这是学习React中状态管理和异步操作的一个很好的例子。