这些 Hook 更优雅地管理你的状态

今天我们来聊聊 ahooks 中那些可以帮助我们更优雅管理我们 state（状态）的那些 hook。一些比较特殊的，比如 cookie/localStorage/sessionStorage，useUrlState等，我们已经单独拿出来细讲了，感兴趣可以看看笔者的历史文章。,管理 object 类型 state 的 Hooks，用法与 class 组件的 this.setState 基本一致。,先来了解一下可变数据和不可变数据的含义和区别如下：,我们知道，React Function Components 中的 State 是不可变数据。所以我们经常需要写类似如下的代码：,通过 useSetState，可以省去对象扩展运算符操作这个步骤，即：,其内部实现也比较简单，如下所示：,可以看到，其实就是将对象拓展运算符的操作封装到内部。,还有其他更优雅的方式？我们可以使用 use-immer[1],useImmer(initialState) 非常类似于 useState。该函数返回一个元组，元组的第一个值是当前状态，第二个是 updater 函数，它接受一个 immer producer 函数或一个值作为参数。,使用如下：,当向更新函数传递一个函数的时候，draft 参数可以自由地改变，直到 producer 函数结束，所做的改变将是不可变的，并成为下一个状态。这更符合我们的使用习惯，可以通过 draft.xx.yy 的方式更新我们对象的值。,这两个都是特殊情况下的值管理。,useBoolean，优雅的管理 boolean 状态的 Hook。,useToggle，用于在两个状态值间切换的 Hook。,实际上，useBoolean 又是 useToggle 的一个特殊使用场景。,先看 useToggle。,而 useBoolean 是对 useToggle 的一个使用。如下，比较简单，不细说,保存上一次状态的 Hook。,其原理，是每次状态变更的时候，比较值有没有发生变化，变更状态：,只在 requestAnimationFrame callback 时更新 state，一般用于性能优化。,window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。,假如你的操作是比较频繁的，就可以通过这个 hook 进行性能优化。,用法与 React.useState 完全一样，但是在组件卸载后异步回调内的 setState 不再执行，避免因组件卸载后更新状态而导致的内存泄漏。,代码如下：,在更新的时候，通过 useUnmountedRef 判断如果组件卸载，则停止更新。,useUnmountedRef 这个我们之前提过，简单回顾下，其实就是在 hook 的返回值中标记组件为已卸载。,给 React.useState 增加了一个 getter 方法，以获取当前最新值。,其实现如下：,其实就是通过 useRef 记录最新的 state 的值，并暴露一个 getState 方法获取到最新的。,这在某一些情况下，可以避免 React 的闭包陷阱。如官网例子：,假如这里不使用 getCount()，而是直接使用 count，是获取不到最新的值的。,React 的 function Component 的状态管理还是比较灵活，我们可以针对一些场景进行封装和优化，从而更优雅的管理我们的 state 状态，希望 ahooks 这些封装能对你有所帮助。,[1]use-immer: https://github.com/immerjs/use-immer