Javascript 平面列表的renderItem是否应该用回调挂钩包装？ const Component=React.memo（props=>{ const{url}=props； const keydextractor=useCallback（item=>item.id，[]）； const handleClick=useCallback（（）=>{ Linking.openURL（url）； }，[url]）； const renderItem=useCallback（{item}）=>{ 返回( 试验 ); }，[handleClick]）； 返回( ); });

就像上面的代码一样

如果

renderItem

函数用

useCallback

钩子包装。它必须检查

handleClick

函数引用是否已更改，因为如果

url

不同，则可能会更改

handleClick

函数。看起来有点奇怪

我想知道使用

useCallback

包装

renderItem

的性能是否有显著差异

---

对

renderItem

函数使用钩子的最佳实践是什么？谢谢，因为您已经使用了React.memo，除非url发生更改，否则不会执行该组件。如果url发生更改，useCallback将重新创建函数，这样您就可以忽略这些函数，前提是这是唯一可以更改的道具

这里有一些代码演示了这一点，您可以重新渲染应用程序，但它不会重新渲染其他组件，除非您更改url

const子组件=（{onClick}）=>{
console.log（“子组件渲染”）；
返回日志url；
};
const PureComponent=React.memo（函数PureComponent({
网址，
}) {
log（'pure component render'，url）；
//即使我做出了反应。useCallback（fn，[url]）这意味着
//当url更改时，它会创建onClick，但它已经更改了
//仅在url更改时创建onClick，因为memo将
//记住组件结果，不要执行PureComponent
//除非url改变
const onClick=（）=>console.log（'url是'，url）；
返回；
});
常量应用=（）=>{
const[，reRenderApp]=React.useState（{}）；
const[url，setUrl]=React.useState(
新日期（）.ToutString（）的
);
console.log（'rendering App'）；
返回(
reRenderApp（{}}>
重新渲染应用程序
setUrl（新日期（）.toutString（））}
>
设置url
);
};
ReactDOM.render（，document.getElementById（'root'））