React Hooks - 如何安全地使用state

Hi，丹尼尔，今天我们来聊一聊 “如何安全地使用 state” 怎么样？

丹尼尔：安全？难道使用 React Hooks 的 state 还会带来危险？X﹏X 紧张~

放松放松，关于安全，等会我给个例子就会很好理解了。没有例子的辅助，好难一下子说明白，也可能是我的表达能力 So So 吧！

丹尼尔：好吧。在场的各位同学，有不清楚 React Hooks 是什么的吗？

也许有一些同学还不太了解，我就简单地介绍下（突然有种凑字数的嫌疑 ﾍ(･_|）：

React Hooks 是个好东西，它让你可以用纯函数来实现有状态的组件，从此你不用再纠结组件到底是有状态还是无状态，从而在纯函数和类两种实现间徘徊（当然好处多多，绝不止这个，后面我会专门写一篇介绍 Why React Hooks 的文章滴😬）。

一旦你踏上 React Hooks 的征途，就会碰到各种各样奇怪的问题。

这很正常，一个新事物的诞生，总是伴随着各种问题，然后在打怪中不断升级成长，最终成为。。。

丹尼尔：喂喂，别扯远了

🤪如果你有看过关于 React Hooks 的官方文档，看过里面的一些例子，你可能会觉得，挺简单的，不过是改成用 useState 来使用 state 而已，没啥难度。

然而就在你放松警惕的这个moment，“危险”正在悄悄地在某些角落降临了。

丹尼尔：紧张，什么危险，不会失身吧

😅 额~~

对于 state 值的获取，你可能取到了一个不是你所期望的旧值，即不是最新的状态值。

你需要时时刻刻保持清醒，才有可能绕过这些“危险”。

丹尼尔：😵

看着你一脸蒙B的样子，我这就赶紧给个例子哈。

栗子来了：当你在表单上填写了一些信息，然后离开表单时，希望能自动保存为草稿，以便下次进来时能还原，省去重新填写的麻烦。

下面给出简化版的实现：

import React, { useState, useEffect } from "react";

export const UseStateDemoComp1 = () => {
  const [name, setName] = useState('daniel');

  useEffect(function() {
    return () => {
      saveDraft()
    }
  }, [])

  function saveDraft() {
    console.log('Save Draft:', name);
  }

  return (
    <div>
      <form>
        <input value={name} onChange={e => setName(e.target.value)}></input>
      </form>
    </div>
  );
};

昨一看，代码好像没啥问题。

传给 useEffect 的 function 返回了一个 function，该 function 相当于原来的componentWillUnmount生命周期方法，即只在组件快销毁的时候才会调用执行。在该方法里面执行一些逻辑，这里调用saveDraft方法，获取 name state 的值，然后保存。

找出问题了吗？如果没有，那我们直接看个动图吧，看看问题所在：

点击 Toggle 按钮会销毁掉组件，所以会触发销毁动作。从动图可以看到，我们填写的是“sarah”，但在销毁执行的方法中，取到的值却是“daniel”

丹尼尔：这是为什么呢？不应该是最新的值吗？😶

因为useEffect的依赖是个空数组，所以在整个组件生命周期只会执行一次，即在组件第一次完成渲染后执行，而useEffect的方法里面用到的 state 值就是当时最新的state值，可以用快照来理解。在接下来的时间里，无论组件重新渲染多少次，都不会改变里面的 state 的值，因为它只是当时的快照

有同学可能会说，把 name 加进 useEffect 依赖的数组里面就行了。如下：

useEffect(function() {
    return () => {
      saveDraft()
    }
}, [name])

看上去好像是满足了需求，但依然有问题。因为我只想在组件退出的时候才保存，但现在的效果就是表单字段值一旦改变，就会保存，保存操作变得非常的频繁。

丹尼尔：所以你想说 React Hooks 对此毫无办法？

当然不是啦，通过 useRef 和 useEffect 是可以实现上面的需求的。怎么实现？同学们就自己动下脑筋吧。当你实现出来后，你会发现代码不仅啰嗦，可读性还差。

丹尼尔：好了，请开始你的表演吧

😎有了上面的例子，这里就可以对安全地使用state作个描述了：

“安全地使用 state，就是无论你在何时何地以何种方式读取 state 的值时，它总是符合你的预期，总是最新的那个值，而不用你小心翼翼地去判断它会不会是个没更新的旧值”

官方提供了自定义Hooks的能力，就是想通过社区的共同努力，来持续完善Hooks。

接下来我们通过 【nice-hooks】这个第三方自定义Hooks的开源项目，使用它的 useSingleState 来代替 useState，话不多说，直接上代码

import React, { useEffect } from "react";
import { useSingleState } from "nice-hooks";

export const DemoComp1 = () => {
  const [state, setState] = useSingleState({
    name: 'daniel'
  });

  useEffect(function() {
    return () => {
      saveDraft()
    }
  }, [])

  function saveDraft() {
    console.log('Save Draft:', state.name);
  }

  return (
    <div>
      <form>
        <input value={state.name} onChange={e => setState({name: e.target.value})}></input>
      </form>
    </div>
  );
};

先来个动图直接看下效果。完美~

这里介绍一下useSingleState这个 hook：它使用类似于 class 形式的 this.state 和 this.setState 的方式来使用 state，所以非常容易上手。最重要是它可以安全地使用 state，并且拥有 callback 能力。

最后我们使用 useLifeCycle 这个 hook 对代码进一步完善。好了，下面的代码成品相比于直接使用官方的 hooks，是不是感觉好多了。

import React from "react";
import { useSingleState, useLifeCycle } from "nice-hooks";

export const DemoComp1 = () => {
  const [state, setState] = useSingleState({
    name: 'daniel'
  });

  useLifeCycle({
    willUnmount() {
      saveDraft()
    }
  })

  function saveDraft() {
    console.log('Save Draft:', state.name);
  }

  return (
    <div>
      <form>
        <input value={state.name} onChange={e => setState({name: e.target.value})}></input>
      </form>
    </div>
  );
};

时间真快，又到了该说再见的时候。

如果你觉得这篇文章写得还可以，还请点个赞哦。

如果你觉得 nice-hooks 还不错，还请加颗☆哦。

ByeBye!

Keywords: react, hooks, nice-hooks