javascript - 是否可以在 React JS 中不使用 useEffect 来获取 API？

Question

大家好，我是新手...当我 friend 使用 useState 而不是使用 useEffect 获取 API 时，我发现了他的代码。我试过了，它成功了，代码没有导致错误和无限循环。

这里是代码

import { useState } from "react";
import { IN_THEATER, POSTER } from "../../../constant/movies";
import { GlobalGet } from "../../../utilities/fetch";

const Service = () => {
  const [movieData, setMovieData] = useState({ data: null, poster: null });

  const fetchMovieData = async () => {
    try {
      let movieRes = await GlobalGet({ url: `${IN_THEATER}` });
      return movieRes;
    } catch (error) {
      console.log(error);
    }
  };

  const fetchPoster = async () => {
    try {
      let posterRes = await GlobalGet({ url: `${POSTER}` });
      return posterRes;
    } catch (error) {
      console.log(error);
    }
  };

  const fetchData = async () => {
    setMovieData({
      data: await fetchMovieData(),
      poster: await fetchPoster(),
    });
  };

  useState(() => { //<=here it is
    fetchData();
  }, []);
  return {
    movieData,
  };
};

export default Service;

我的问题是，为什么会发生这种情况？为什么使用 useState 不会导致无限循环？

Answer 1

useState() 函数可以接受一个initializer 函数作为它的第一个参数:

const [state, setState] = useState(initializerFunction)

当函数被传递给 useState() 时，该函数仅在组件初始安装之前被调用一次。在下面的例子中，初始化函数是一个匿名箭头函数:

useState(() => { // <-- Initializer function invoked once
  fetchData();
}, []);

这里，初始化函数是 () => { fetchData(); }，在初始挂载前调用一次，所以fetchData()方法只调用一次。作为第二个参数 [] 传递的数组是无用的，在这种情况下不会执行任何操作，因为它会被 useState() 忽略。如果您执行 useState(fetchData);，上面的 useState 将表现相同。因为 fetchData() 只在初始挂载时调用一次，所以组件的任何状态更新都不会导致 fetchData() 函数再次执行，因为它在初始化程序中功能。

话虽如此，useState() 不应该用于在组件的挂载上获取数据，这就是 useEffect()应该改用 for。