在某些情况下绕过 useState 是正确的做法吗？答案

【问题标题】：Is it correct practice to bypass useState in some scenarios?在某些情况下绕过 useState 是正确的做法吗？
【发布时间】：2021-01-30 20:05:04
【问题描述】：

我的 React 组件中有两种状态：

// Selected item state
const [selectedItem, setSelectedItem] = React.useState(null);

// Toggle callout visibility
const [isCalloutVisible, setIsCalloutVisible] = React.useState(false);

我有一个重置功能来重置我的状态。为了防止双重重新渲染，我绕过了 setIsCalloutVisible：

const reset = () => {
  isCalloutVisible = false;
  setSelectedItem(null);
}

这是正确的方法吗？或者有没有更简洁的方法在一次重新渲染中重置两种状态？

[edit] 感谢第一个 cmets 和回复，显然将两者合并到一个状态会有所帮助。我有兴趣了解的是为什么我目前的方法不正确，以及负面影响是什么。

【问题讨论】：

不是。正确的做法是“找出哪些动作触发了双重渲染，然后找出为什么它会触发双重渲染，然后修复它”。
如果这些值绑定在一起，请将它们转换为单一状态，以便您可以同时更新它们。
不，你不应该改变你的状态对象，这是一种反模式。 “双重渲染”有问题吗？例如，第二次渲染是否会导致您的应用出现问题？为什么不能在同一个渲染周期内同时重置两者？是什么导致任何东西双重渲染？请提供更多背景信息。
React 文档也是（重新）熟悉复杂性的绝佳来源，reactjs.org/docs/hooks-rules.html#explanation 涵盖了一些重要方面
啊，假设......每次都会让你明白。不，正如@Mike'Pomax'Kamermans 所描述的那样......来自任何单个渲染周期的所有排队状态更新本质上是“聚合在一起”，几乎就像一个“单个”更新。至少，由于 Javascript 事件循环的工作方式，React 需要等待至少函数完成排队多个更新才能开始任何状态更新.这方面是否清楚一点并且有意义？

标签： reactjs react-hooks use-state

【解决方案1】：

你可以创建这样的东西

const [data, setData] = react.useState({ 
  isCalloutVisible: false, 
  selectedItem: null 
})
const reset = () => {
  setData({
    isCalloutVisible: false,
    selectedItem: false
  })
}

【讨论】：

谢谢，这肯定会解决问题。我选择了@drew-reese 的答案，因为我发现使用不同状态的代码更易于阅读，并且更容易扩展到其他状态。

【解决方案2】：

给定以下组件状态：

// Selected item state
const [selectedItem, setSelectedItem] = React.useState(null);

// Toggle callout visibility
const [isCalloutVisible, setIsCalloutVisible] = React.useState(false);

如果您想在单个回调中重置两个状态值，只需将两个状态更新加入队列即可。

const reset = () => {
  setSelectedItem(null);
  setIsCalloutVisible(false);
}

来自单个渲染周期的所有 React 状态更新都在个渲染周期之间进行批处理，并且为下一个周期返回计算的状态。

State updates may be Asynchronous & Batched

【讨论】：

这很有帮助，谢谢！仍然阻碍我的是“可能”部分，这使得它听起来不可靠。
@Christophe 非常清楚的是，在 any 渲染周期中，react state 是 const 的，它不能被更新，而且它在组件定义的功能范围。我认为您不应该让该部分的标题使您失望。我必须为文档/博客/等做一些研究，但我确信 React 对状态更新的立场永远不会改变，因为知道状态在渲染周期和周期内是恒定的，所以包含了太多的确定性逻辑更新是所有更新的大门。 React 是一个带有快照视图的状态机。