useState更新状态的函数形式能否同时获取最新props与旧state？

是否为React团队有意设计 #

是的，这是React团队的主动设计，本质是类组件和函数组件的底层模型差异导致的设计简化：

• 类组件的实例this是持久存在的，this.props是可变值，setState是异步执行的，回调触发时this.props可能已经发生变更，因此需要将更新后的最新props作为第二个参数传入回调，保证取值正确性。
• 函数组件每次渲染都是独立的执行上下文，props是当前渲染上下文的不可变参数，在本次渲染产生的所有回调中直接访问props，拿到的天然就是当前渲染周期的最新值，不需要额外通过更新函数传参获取。

如何在useState更新时同时获取前一次state和最新props #

分两种场景实现：

场景1：同步更新状态 #

直接在更新函数的回调中访问当前作用域的props即可，和类组件setState回调的第二个参数效果完全等价：

import { useState } from 'react';

const Counter = ({ step }) => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(prevCount => {
      // 直接访问作用域内的step，就是最新props
      return prevCount + step;
    })
  }

  return <button onClick={handleClick}>当前计数：{count}</button>
}

场景2：异步更新状态 #

如果状态更新触发在异步回调（比如定时器、接口请求回调）中，当前闭包的props可能已经过期，可以用useRef存储最新的props值：

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

const AsyncCounter = ({ step }) => {
  const [count, setCount] = useState(0);
  // 用ref存储最新的step值
  const latestStepRef = useRef(step);
  // 每次step变化时更新ref
  useEffect(() => {
    latestStepRef.current = step;
  }, [step])

  const handleAsyncClick = () => {
    // 模拟1秒后异步更新状态
    setTimeout(() => {
      setCount(prevCount => {
        // 从ref中取最新的step值
        return prevCount + latestStepRef.current;
      })
    }, 1000)
  }

  return <button onClick={handleAsyncClick}>点击1秒后计数：{count}</button>
}

内容的提问来源于stack exchange，提问作者gamebecks