taro 中 useEffect支持async及await使用方式

在使用 useEffect 的时候，假如回调函数中使用 async...await...的时候，会报错如下:

看报错，我们知道 effect function 应该返回一个销毁函数 (effect: 是指return返回的cleanup函数)如果 useEffect 第一个参数传入 async，返回值则变成了 Promise，会导致 react 在调用销毁函数的时候报错。

React 为什么要这么做?

useEffect 作为 HooksQ 中一个很重要的 Hooks，可以让你在函数组件中执行副作用操作。它能够完成之前 Class Component 中的生命周期的职责。它返回的函数的执行时机如下:

●首次渲染不会进行清理，会在下一次渲染，清除上一次的副作用。

●卸载阶段也会执行清除操作。

不管是哪个，我们都不希望这个返回值是异步的，这样我们无法预知代码的执行情况，很容易出现难以定位的 Bug。所以 React 就直接限制了不能 useEffect 回调函数中不能支持 async...await...

useEffect 怎么支持 async await

实现有多种方式，这里介绍自定义 hooks的方式

import { useEffect } from '@tarojs/taro'
export function useAsyncEffect (effect: () => Promise<any>, deps?: DependencyList) {
  useEffect(() => {
    effect()
  }, deps)
}