什么是等效的传递一个更新器到setState，以'（状态，道具）'作为参数更新状态，使用React钩子？

Question

使用React中的setState函数替换的最佳做法是什么。组件--https://reactjs.org/docs/react-component.html#setstate

setState(updater, [callback])

更新程序具有签名的位置

(state, props) => stateChange

（因此，新状态取决于以前的状态和道具）

--用鱼钩？

当我搜索useState钩子的API时，https://reactjs.org/docs/hooks-reference.html#functional-updates

函数更新如果使用以前的状态计算新状态，则可以将函数传递给setState。函数将接收上一个值，并返回更新后的值。下面是一个计数器组件的示例，它使用两种形式的setState：

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

更新状态的函数，setCount，不接受props作为参数。

最佳实践是使用useffecthook，并将道具作为依赖项吗？

有人能解释一下为什么这是分开的吗？

Answer 1

Hooks FAQ中有一节是关于如何实现getDerivedStateFromProps？。虽然它首先说你可能不需要从道具派生状态，但它接着给出了一个通过闭包引用道具的例子，即直接引用它们。

所以我认为直接引用prop和set state函数参数的组合应该可以工作，比如：

export default function Conuter({ incrementBy }) {
  const [count, setCount] = useState(0)
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(prevCount => prevCount + incrementBy)}>
        Increase count by increment
      </button>
      <button onClick={() => setCount(0)}>Reset</button>
    </>
  );
}

这里有一个活生生的例子。

Answer 2

简而言之，是的，使用设置计数（计数1）是完全安全的，这是设置功能组件状态的通常做法。

如果您正在寻找回调模式，我相信这篇其他的SO帖子将更适合回答您的问题，因为他们正在为此目的使用使用效果钩子。