前言
在项目中经常对true 或 false进行切换，大多数时候这些都是布尔类型。
以下介绍两种方法，直接使用 setState 的方法常规，但是不高级，也容易犯错。
用 useReducer就很 nice
常规的方法
下面是使用 useState 钩子实现的简单切换可能的样子。
const [isOpen, setIsOpen] = useState(false);
我们定义了一个名为 isOpen 的切换开关，其初始值为 false 。 如果我们想切换 isOpen 的值，我们可以像这样使用 setIsOpen 函数来实现。
<button onClick={() => setIsOpen(!isOpen)}>
切换 isOpen
</button>
我们可以在每次单击按钮时使用 !isOpen 设置 isOpen 的相反布尔值，因此它将在 true 和 false 之间切换。
这里的问题是每次你想切换 isOpen 的值时都需要将值传递给 setIsOpen ，这不直观，最重要的是，它是更容易出错。
因此，为了使事情更简洁，我们可以采用不同的方法来完成此操作。那就是使用 useReducer 钩子。
使用 useReducer 钩子
useReducer 钩子，如 文档所示，是 useState 钩子的替代品。
因此，如果我们要使用 useReducer 挂钩实现相同的切换机制（在前面的示例中提到），我们可以按照以下方法进行操作。
首先，我们需要像这样设置 useReducer 钩子。
const [isOpen, toggleIsOpen] = useReducer((state) => {
return !state;
}, false);
让我们把它分解一下以便清楚地理解。
useReducer 钩子接受 (state, action) => newState 类型的reducer作为第一个参数，并返回与 dispatch 方法配对的当前状态。
在我们的例子中，
- 当前状态为
isOpen - dispatch是
toggleIsOpen
useReducer 钩子还接受第二个参数，该参数将是状态的初始值。因此，在我们的示例中， isOpen 的初始值为 false 。
reducer 的逻辑与我们在 useState 示例中使用的逻辑相同。唯一的区别是
现在在钩子的定义本身中是解耦和独立的。
因此，我们不需要手动设置 isOpen 的值。 useReducer 钩子负责所有这些。
所以，现在如果我们想切换 isOpen 的值，我们需要做的就是调用 toggleIsOpen 而不像这样向它传递任何参数。
<button onClick={toggleIsOpen}>
切换 isOpen
</button>
总结
像这样管理布尔切换更直观、更简洁。
全文完
谢谢！
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 23 天
