javascript - 使用 setItem 设置多个状态值和使用 useEffect 这样做有什么区别？

Question

我的应用程序中有一个重置按钮，用于重置功能组件的一些变量:

const [selectedItem, setSelectedItem] = useState(0);
const [a, setA] = useState('a');
const [b, setB] = useState('blue');

<button onClick={e => ???}>clicky</button>
<button onClick={e => ???}>clicky</button>

我可以通过两种方式“重置”数据:使用 useEffect 监控 selectedItem 的更改，或者使用一个处理程序来执行此操作:

<button onClick ={e => setSelectedItem(e.target.value)} />
useEffect(() => {
  setA(Math.random())
  setB(Math.random())
}, [selectedItem])

or

<button onClick ={e => handler(e.target.value)} />
const handler = item => {
  setSelectedItem(Math.random())
  setA(Math.random())
  setB(Math.random())
}

这些方法之间的实际区别是什么？钩子(Hook)文档说使用 useEffect 来执行副作用，但我不明白为什么这种方法不起作用。

Answer 1

What is the difference between these approaches?

我将尝试从三个方面来回答这个问题。

心智模型 您需要“考虑效果”。 UseEffect Hook 可让您执行通常需要异步发生的副作用，例如(从 API 获取数据、操作 DOM)。

基于此，最好使用 UseEffect 来处理副作用，这样你就不会混淆你的大学。

异步 您需要记住 useEffect 是一个异步函数，但您的事件处理程序是同步函数。这可能会导致完全不同的行为，也许您在这里没有看到奇怪的行为，但也许在其他示例中，您会开始注意到这一点。

react 机制 最后要注意的区别是你需要了解 React 更新状态机制，react 会打补丁来更新状态。这意味着在您的事件处理程序中，三态将导致一次重新渲染，因为它们将同时发生。在您的 useEffect 中，情况并非如此，您正在更新其中一个重新渲染的案例，然后您正在执行将重新渲染案例的效果。

也许还有其他差异，但我现在能看到什么。

我希望这是一个有用的答案。