将回调传递给组件时,我应该使用 useCallback
Hook 返回内存回调(以防止不需要的渲染):
import doSomething from "./doSomething";
const FrequentlyRerenders = ({ id }) => {
const onEvent = useCallback(() => doSomething(id), [id]);
return (
<ExpensiveComponent onEvent={ onEvent } />
);
};
但是如果我使用 map 怎么办?例如:
import doSomething from "./doSomething";
const FrequentlyRerendersMap = ({ ids }) => {
return ids.map(id => {
const onEvent = useCallback(() => doSomething(id), [id]);
return (
<ExpensiveComponent key={id} onEvent={ onEvent } />
);
});
};
我应该如何正确使用useCallback
?以上是传递多个回调的正确方法吗?它真的有效并且知道根据数组的一项来内存每个回调吗?
最佳答案
将返回的映射的JSX转换成组件,然后就可以使用Callback了,没有问题
import doSomething from "./doSomething";
const MappedComponent =(props) => {
const onEvent = useCallback(() => doSomething(props.id), []);
return (
<ExpensiveComponent onEvent={ onEvent } />
);
}
const FrequentlyRerendersMap = ({ ids }) => {
return ids.map(id => {
return <MappedComponent key={id} id={id} />
});
};
关于reactjs - React useCallback 钩子(Hook)用于 map 渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55963914/