Reactjs 向嵌套的功能组件传递事件处理程序时如何避免重新呈现

假设我有一个简单的函数组件，它根据过滤器字段呈现许多其他函数组件

HomeView

是父功能组件，它使用状态处理

DomainCard

（子功能组件）过滤：

const HomeView=props=>{
//领域
const domains=useSelector（state=>state.domains）
常量[nameFilter，setNameFilter]=useState（“”）
const gotodomain detailview=id=>{
history.push（config.url.domainLocal.replace（':id'，id））
}
返回(
setNameFilter（值）}
/>
{domains.data
.filter（domain=>！nameFilter | | domain.name.toLowerCase（）。包括（nameFilter.toLowerCase（））
.map（（域，idx）=>(
))}
)
}

现在这里发生的事情是，在过滤时，已经显示的组件（

DomainCard

）会重新呈现，即使是记忆它们。这是因为

HomeView

组件本身由于其状态更改而重新呈现，并且作为一个功能组件，

goToDomainDetailView

函数被重新定义，并从以前的提交更改

所以我想到的唯一一件事就是在组件外部定义

goToDomainDetailView

：

const gotodomain detailview=id=>{
history.push（config.url.domainLocal.replace（':id'，id））
}
const HomeView=props=>{
//领域
const domains=useSelector（state=>state.domains）
常量[nameFilter，setNameFilter]=useState（“”）
返回(
setNameFilter（值）}
/>
{domains.data
.filter（domain=>！nameFilter | | domain.name.toLowerCase（）。包括（nameFilter.toLowerCase（））
.map（（域，idx）=>(
))}
)
}

在这种情况下，这种方法是有效的

但它之所以能工作，是因为

goToDomainDetailView

函数不依赖组件道具或Redux分派函数。如果是这样的话，我就不能将函数移到外部，我想避免重新渲染的唯一其他方法是将类组件中的

HomeView

组件进行转换，这样

goToDomainDetailView

函数就可以定义为类方法，尽管在重新渲染时不会改变

因此，问题是：

• 我的假设正确吗
• 你如何处理这种常见的情况
• 在您看来，使用带状态的嵌套功能组件并避免重新呈现所有功能子组件（例如使用

  React.memo

  的第二个参数并避免仅在处理程序函数ref更改时重新呈现）的正确方法是什么

  ---

您可以使用

useCallback（）

hook来记忆回调：

。。。
const somepropendencallback=useCallback(
id=>console.log（id，someProp），
[someProp]
);

您可以使用

useCallback（）

钩子来记忆回调：

。。。
const somepropendencallback=useCallback(
id=>console.log（id，someProp），
[someProp]
);

是的，这就是答案，我错过了

useCallback

，谢谢。是的，这就是答案，我错过了

useCallback

，谢谢