在 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