春节之后，最大的新闻，就是 react hooks 从 alpha 版本变成了正式版本，所以迫不及待的尝试一波，准备后续直接运用到后续的产品中。下面记录了使用过程中遇到的一个闭包的问题。

在以前的开发过程中用到很普遍的场景就是从服务端拿数据，一般来说，在hooks之前，请求的发送位置都在componentDidMount 里面，至于为什么这里就不再赘述，相信网上很多地方都有提到。

现在换成hooks之后，目前来说最佳请求数据的地方应该在useEffect中，像这样

function DemoComponent(props) {
  useEffect(() => {
    fetchData().then((data) => {
      // some operate for data
    })
  }, [])
}

最后的数据需要响应到界面上所以我们还需要用一个state来管理, 像这样

function DemoComponent(props) {
  const [name, setName] = useState('name')
  const [age, setAge] = useState(10)
  useEffect(() => {
    fetchData().then((data) => {
      // some operate for data
     setName(data.name)
     setAge(data.age)
    })
  }, [])
}

到目前为止看不出太大的问题，继续

在实际业务中有可能字段很多，所以再考虑是否能像以前class components 一样用一个对象来管理所有的state。所以代码改成这样

function DemoComponent(props) {
  const [state, setState] = useState({ name: 'name', age: 10 })
  useEffect(() => {
    fetchData().then((data) => {
      // some operate for data
      setState({
        name: data.name,
        age: data.age
      })
    })
  }, [])
}

运行结果似乎也没有什么问题。接下来我们再加另外一个请求

function DemoComponent(props) {
  const [state, setState] = useState({ name: 'name', age: 10, count: 0 })
  useEffect(() => {
    fetchData().then((data) => {
      // some operate for data
      setState({
        name: data.name,
        age: data.age
      })
    })
    fetchCount().then((count) => {
      setState({
        count: count
      })
    })
  }, [])
}

结果总会有一个结果被覆盖掉，不符合预期。后面发现是因为这里的setState虽然改成了对象，但是它并不会像class components那样帮你自动合并前面的state，

Note
Unlike the setState method found in class components, useState does not automatically merge update objects

粘贴来自官方文档，所以这里需要手动合并，像这样

function DemoComponent(props) {
  const [state, setState] = useState({ name: 'name', age: 10, count: 0 })
  useEffect(() => {
    fetchData().then((data) => {
      // some operate for data
      setState({
        ...state,
        name: data.name,
        age: data.age
      })
    })
    fetchCount().then((count) => {
      setState({
        ...state,
        count: count
      })
    })
  }, [])
}

这样改正之后按道理就应该符合我们的预期了，运行后发现，还是后响应的会把前一个响应的给覆盖了，这里附上demo链接https://codesandbox.io/s/k61zml7rr。

难道是state异步更新的问题?

function DemoComponent(props) {
  const [state, setState] = useState({ name: 'name', age: 10, count: 0 })
  console.log(state)
  useEffect(() => {
    fetchData().then((data) => {
      // some operate for data
      setState({
        ...state,
        name: data.name,
        age: data.age
      })
    })
    fetchCount().then((count) => {
      setState({
        ...state,
        count: count
      })
    })
  }, [])
}

打印查看后，state其实是已经更新过的。

最后排查发现就是因为在useEffect里面依赖了preState, 但是在每一次更新后，其实useState返回的state指向是一个新的对象，所以useEffect里面由于闭包的原因，引用的是最初始的state对象，所以这样的合并的还是最初始的state，导致现在的结果。

官方后续新增了https://github.com/facebook/react/pull/14636 eslint规则来检查这样旧的闭包依赖。从而提醒我们在写的过程中避免这样的依赖问题。

像我们上述的这样的情况，要让state保持最新的方法有，
一、useEffect的callBack多次执行，这样显然不符合我们的预期，因为数据初始化请求往往只需要一次
二、避免对外部变量的依赖，但是又要拿到最新的preState，官方文档中还有提到的functional-updates。这样就可以避免对外部变量的引用了。

该文章是问了记录自己在使用hooks的时候遇到的坑，有可能这个场景你不会覆盖到，但是这样问题的本质反应出了hooks闭包应用问题。Dan在twitter中有提到后续数据获取会有新的解决方案就是Suspense，

最后

hooks给我们带来了一种新的编程方式，也给我们带来更多的可能，目前社区已衍生出很多好用的自定义hooks。引用Dan的一段话

React is not really a language. But its innovation is very language-like: functions that can have tree-based local state and effects, but are invoked like functions.
Classes and plain functions are an approximation of this model. Functions with Hooks are a closer approximation.

其他

部分三方自定义hooks的库也有同样的问题，选取了当前star较多的react-use进行了修复https://github.com/streamich/react-use/pull/112