useEffect使用指南

一、夺命连环call

如果在useEffect函数中不写第二个参数，会使程序陷入死循环。

1.每次渲染结束都会调用useEffect函数，

2.而useEffect的副作用使得组件的状态更新，

3.导致UI的重新渲染，程序就陷入了死循环。

因此，要谨慎使用第二个参数为空的情形。

可以让第二个参数为空数组，模拟生命周期函数componentDidmount。

二、在useEffect中使用async/await

错误示范：

错误提示有两层意思：

1.useEffect要返回只能是一个函数，或者什么都不返回；

2.useEffect不支持关键词async，原因是：使用async/await关键词，会返回一个promise，useEffect的返回也就是promise了。

正确示范：

在useEFfect中写一个异步函数，并调用它。

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/users"
    );
    const data = await response.json();
    setRobotGallery(data);
  };
  fetchData();
}, []);

三、loading的处理

在请求后端数据，且数据没有返回的时候，需要展示加载中，这就需要获取loading的状态。

const [loading, setLoading] = useState<boolean>(false);

可以在访问api之前将loading设置为true，显示加载中，

等到数据返回，将loading切换为false。

useEffect(() => {
  const fetchData = async () => {
    setLoading(true);
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/users"
    );
    const data = await response.json();
    setRobotGallery(data);
    setLoading(false);
  };
  fetchData();
}, []);

render：

{loading ? (
  <div>加载中.....</div>
  ) : (
  <div className={styles.robotList}>
    {robotGallery.map((r) => (
    <Robot id={r.id} name={r.name} email={r.email} />
    ))}
  </div>
)}

四、error的处理

api请求会出现不确定的错误，需求在副作用函数中对api请求做异常的处理。这里用一个string类型来保存错误信息。

const [error, setError] = useState<string>("");

async/await异步模式，可以使用一个try-catch来处理和截获异常，try-catch的位置和setLoading位置一致。

useEffect(() => {
  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/users"
      );
      const data = await response.json();
      setRobotGallery(data);
    } catch (e) {
      if (e instanceof Error) {
        setError(e.message);
      }
    }
    setLoading(false);
  };
  fetchData();
  }, []);

render：

{error !== "" && <div>网站出错：{error}</div>}