在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:错误案例。不可能在useCallback内部使用useEffect：https://reactjs.org/docs/hooks-rules.html