useEffect使用（不能直接在useEffect中使用async函数）

a伊雪

已于 2022-08-17 17:23:28 修改

阅读量2.8k

点赞数 3

分类专栏： react17 文章标签： javascript 开发语言 ecmascript

于 2022-08-17 17:12:03 首次发布

原文链接：https://www.jianshu.com/p/af2455d4173f

版权

react17 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.useEffect是什么？

副作用钩子：用于处理组件中的副作用，用来取代生命周期函数。

tip：

函数的副作用：js中要想保证函数无副作用这项特性，只能依靠编程人员的习惯，即
1，函数入口使用参数运算，而不修改它
2，函数内不修改函数外的变量，如全局变量
3，运算结果通过函数返回给外部（出口）

1.useEffect是什么？

副作用钩子：用于处理组件中的副作用，用来取代生命周期函数。

useEffect(()=>{//副作用函数
    return ()=>{ // 返回函数

    }
},[依赖参数])

2.useEffect可以做什么？

挂载阶段：
从上向下执行函数，如果碰到 useEffect 就执行并将 useEffect 传入的副作用函数推入一个队列(链表)，在组件挂载完成之后，将队列（链表）中的副作用函数执行，并将副作用函数的返还函数，推入一个新的队列（链表）
更新阶段 - !!! 更新阶段不同于其他阶段对应的函数是否要执行，取决于依赖参数：
从上向下执行函数，如果碰到 useEffect 就执行并将 useEffect 传入的副作用函数推入一个队列(链表)，在组件更新完成之后，找出之前的返回函数队列，依次准备执行，在执行前会判断该 useEffect 的依赖参数，如果依赖参数改变就执行，否则跳过当前项去看下一项，然后再执行副作用队列，执行时同样判断依赖是否变化，来决定其是否执行，如果执行，就重新获取其对应的返回函数。
卸载阶段：
组件即将卸载时，找出其对应的返回函数队列，依次执行

3.常规处理副作用的几种情况：

依赖参数不同时有不同的效果：
为空：组件的任何更新，该 useEffect 对应的返回函数和函数都执行
为空数组: 不监听组件的更新
数组中有具体依赖：对应的依赖数据，有变化的时候，才会执行

组件挂载完之后做某事

useEffect(()=>{
    console.log("组件挂载完之后执行");
    return ()=>{

    }
  },[]);

组件挂载完成及更新完成做某事

useEffect(()=>{
    console.log("组件挂载完成之后及更新完成之后执行");
})

组件更新完做某事

const isMounted = useRef(false);
useEffect(()=>{
    if(isMounted.current){
        console.log("组件更新完成")
    } else {
      isMounted.current = true;
    }
})

组件即将卸载做某事

useEffect(()=>{
    return ()=>{
      console.log("组件即将卸载时执行");
    }
},[]);

不能直接在useEffect中使用async函数

错误例子：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState({ hits: [] });

  useEffect(async () => {
    const result = await axios(
      'http://localhost/api/v1/search?query=redux',
    );

    setData(result.data);
  }, []);

  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}

原因：

https://www.jb51.net/article/254908.htm

useEffect的第二个参数可用于定义其依赖的所有变量。如果其中一个变量发生变化，则useEffect会再次运行。如果包含变量的数组为空，则在更新组件时useEffect不会再执行，因为它不会监听任何变量的变更。

还有最后一个问题。在代码中，我们使用async / await从第三方API获取数据。如果你对async/await熟悉的话，你会知道，每个async函数都会默认返回一个隐式的promise。但是，useEffect不应该返回任何内容。这就是为什么会在控制台日志中看到以下警告：

Warning: useEffect function must return a cleanup function or nothing. Promises and useEffect(async () => …) are not supported, but you can call an async function inside an effect

这就是为什么不能直接在useEffect中使用async函数，因此，我们可以不直接调用async函数，而是像下面这样：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState({ hits: [] });

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'http://localhost/api/v1/search?query=redux',
      );

      setData(result.data);
    };

    fetchData();
  }, []);

  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}

export default App;