在 useEffect 外部定义函数并在其内部调用该函数与在 useEffect 内部定义函数有什么区别？

Question

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

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

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

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

场景二：在UseEffect外定义函数，在UseEffect内调用。

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

场景三：使用useCallback在UseEffect外部定义函数，在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

What is the difference between defining a function outside useEffect and calling that function inside of it and defining a function inside useEffect?