在 useEffect 之外定义一个函数并在其中调用该函数和在 useEffect 中定义一个函数有什么区别？

Question

我的场景很少，我想了解渲染和性能方面的差异。

下面的例子是一个简单的函数，但也请考虑一个更复杂的函数以及一个异步函数。

场景 1：定义函数并在 useEffect 中调用它。

useEffect(() => {
  function getBooks() {
    console.log('I get books!');
  }
  getBooks();
}, []);

场景 2：在 UseEffect 之外定义函数并在其中调用它。

function getBooks() {
  console.log('I get books!');
}
useEffect(() => {
  getBooks();
}, []);

场景 3：使用 useCallback 在 UseEffect 之外定义函数并在其中调用它。

const getBooks = useCallback(() => {
  console.log('I get books!');
}, []);

useEffect(() => {
  getBooks();
}, []);

场景 4：使用 useCallback 在 UseEffect 内部定义一个函数，并在 UseEffect 内部调用它。

useEffect(() => {
  const getBooks = useCallback(() => {
    console.log('I get books!');
  }, []);
  getBooks();
}, []);

Answer 1

案例 1：getBooks 只在 useEffect 内创建一次。而getBooks 仅在调用useEffect 时创建。

案例 2：getBooks 在组件上创建。并且当组件重新渲染时，getBooks 也会重新创建。

案例 3：与案例 2 相同，但只创建一次。就像案例 1。但是我们可以为每个自定义依赖项。它们将相互独立

案例 4：错误案例。不能在useEffect中使用useCallback：https://reactjs.org/docs/hooks-rules.html