我有几个场景,我想了解关于渲染的差异和性能。
下面的例子是一个简单的函数,但请考虑一个更复杂的函数,以及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();
}, []);
情形1:getBooks
只在useEffect
内部创建一次。getBooks
只在useEffect
被调用时创建。
案例2:在组件上创建getBooks
。当组件重新渲染时,getBooks
也被重新创建。
情况3:它有相同的情况2,但它只创建一次时间。就像情形1。但是我们可以为每一个定制依赖关系。它们将彼此独立
案例4:错误案例。不能在useEffect
中使用useCallback
: https://reactjs.org/docs/hooks-rules.html