记一次hooks陷阱

今天写一个hook，正想发挥hooks这种高级复用方式来缩短我的开发时间，就出现了一个新bug。

我编写的这个hook用于管理数据列表状态。除了导出内部的状态外，还导出一些方法供外部调用。代码简化如下：

function useDataList() {

  const [rows, setRows] = useState([])

  const [pageIndex, setPageIndex] = useState(0)

  async function loadNextPage() {

    const res = await api.searchData(pageIndex+1)

    setRows(res.data.rows)

    setPageIndex(index+1)

  }

  return {

    rows,

    setPageIndex,

    nextPage

  }

}

然后这样使用这个hook：

function App() {

  const {rows, setPageIndex, loadNextPage} = useDataList()

  useEffect(()=>{

    setPageIndex(-1) // 因为loadNextPage中会给pageIndex加一，而初始我们希望请求第0页，因此设为-1

    // 因为setPageIndex()不会立刻改变pageIndex，因此要在下一个事件循环调用loadNextPage()

    setTimeout(()=>{

      loadNextPage()

    })

  }, [])

  return (

    {/* 这里使用rows渲染列表 */}

  )

}

好，现在问题出现了。api.searchData()请求的是第1页，而不是第0页，你知道为什么吗？

原因就在于产生了闭包。

useEffect在App第一次渲染的时候执行，以后不再执行。

这时loadNextPage指向的是第一次App()指向时的loadNextPage，

而这个loadNextPage是第一次执行useDataList时导出的，

它内部的pageIndex保存的是第一次执行useDataList()时的pageIndex的值，也就是0。

因此调用loadNextPage()时，请求的页码是pageIndex+1=0+1=1。

我这种情况和网上说的hooks陷阱有点不一样，但是原理是一样的，都是闭包问题。

查阅资料发现，可以使用ahooks的useMemorizedFn解决这个问题。

这个API可以保持传入的函数不变，但是每次函数执行时访问的都是最新的state。

于是代码这样改：

function App() {

  const {rows, setPageIndex, loadNextPage} = useDataList()

  const wrapedLoadNextPage = useMemorized(()=>{

    loadNextPage()

  })

  useEffect(()=>{

    setPageIndex(-1)

    setTimeout(()=>{

      wrapedLoadNextPage()

    })

  }, [])

  return (

    {/* 这里使用rows渲染列表 */}

  )

}

最后感叹一下，原本以为新技术哪有什么难的，只要迁移以前的知识就行了呗。

结果发现，同一个功能点，用不同的技术实现就是有差别，新的技术产生新的问题，从而导致项目延期。

比如会使用vue开发网页，使用rn开发APP问题应该不大，结果rn的语法和vue不同。

又比如使用uniapp开发过小程序，那使用rn开发APP应该会挺快，结果RN的生态真的简陋，没有uniapp那么齐全方便。

再比如hooks解决了class组件复用上的一些问题，那用起来应该很顺手，结果出了今天的hooks陷阱的问题。

...

下一次学习新技术，要谨慎。

巴特西

记一次hooks陷阱

最新文章

热门文章