在useEffect外部定义函数和在useEffect内部调用该函数以及在useEffect内部定义函数之间的区别是什么

Question

我有几个场景，我想了解关于渲染的差异和性能。

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

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

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

场景2:在UseEffect外部定义函数并在UseEffect内部调用。

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

场景3:使用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