React useEffect不支持async function示例分析

useEffect(async () => {
   await getPoiInfo(); // 请求数据
}, []);

useEffect(() => {
    // Create an scoped async function in the hook
    // 注意如果函数没有使用组件内的任何值，可以把它提到组件外面去定义
    // 下面代码可以提到外面，可以自由地在 effect 中使用，下面就不改啦
    async function asyncFunction() {
      await requestData();
      setData(data)
    }
    // Execute the created function directly
    anyNameFunction();
 }, []); // 这里设置成[]数组，因为我们只想在挂载的时候运行它一次

useEffect(() => {
  // Using an IIFE
  (async function anyNameFunction() {
    await requestData();
  })();
}, []);

// 自定义hook
function useAsyncEffect(effect: () => Promise<void | (() => void)>, dependencies?: any[]) {
  return useEffect(() => {
    const cleanupPromise = effect()
    return () => { cleanupPromise.then(cleanup => cleanup && cleanup()) }
  }, dependencies)
}
// 使用
useAsyncEffect(async () => {
    const count = await fetchData()
    setCount(count)
  }, [fetchData])

// 封装
const requestData = useCallback(async () => {
  changeLoading(true);
  changeError(false);
  changeList([]);
  requestAPI.getFeature({ type }).then((data) => {
    if (data) {
      changeList(data);
    }
  }).catch((e) => {
    changeError(true);
  }).finally(() => {
    changeLoading(false);
  });
}, [type]); // type改变会重新生成函数
// 普通接口请求
useEffect(() => { 
  requestData();
}, [requestData]);
// 单独处理外层刷新的接口请求
// refreshing是props传递的过来的，不应该与state状态改变混在一起，这也是hook的优势，将不相关的状态逻辑拆分成更细粒度
useEffect(() => { 
  if (!refreshing) { 
    return;
  }
  requestData().then(() => {
    getRefreshStatus(false);
  });
}, [refreshing]);