时间戳

首页 > 解决方案 > 使用 setItem 设置多个状态值和使用 useEffect 这样做有什么区别？

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

问题描述

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

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>

有两种方法可以“重置”数据：使用 监视selectedItem更改useEffect，或者使用一个处理程序来执行此操作：

<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())
}

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

标签： javascriptreactjsreact-hooks

解决方案

这些方法有什么区别？

我将尝试分三点回答这个问题。

心智模型 你需要“思考效果”。UseEffect 钩子让您可以执行需要异步发生的副作用（从 API 获取数据，操作 DOM）。

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

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

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

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

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

推荐阅读