Reactjs 我是否可以在父功能组件中定义一个函数，以便作为道具接收该函数的子PureComponent不会重新加载？

我有一个功能组件，它呈现一组简单的子组件。父组件有一个更新状态的函数，并传递给子组件。由于一些性能问题，我决定将子组件转换为纯组件，以减少重新渲染的数量。不幸的是，由于该函数是在父函数组件中定义的，因此每当状态更新且父函数重新提交时，都会重新定义该函数。这会使子组件认为正在传递的函数是新函数，并无条件地导致重新加载

对于这个问题，我已经有了两种不同的解决方案，但在我看来，两者都有点不雅观

在我的第一个解决方案中，我将子组件转换为常规的基于类的组件，并定义了一个自定义的

shouldComponentUpdate

，基本上忽略函数prop。这并不理想，因为这个用例实际上应该由重组包中的

PureComponent

或

pure

来处理

在第二个解决方案中，我将父组件设置为基于类的组件，并定义了我希望作为原型方法传递的函数。然而，我一直试图避开基于类的组件

这是我想作为功能组件重新创建的基于类的代码：

类父级扩展组件{
状态={
子项：[1,2,3,4]//通常由api填充
选定的子项：[]
};
handleChildClick=childId=>{
//在此.state.selectedChildren中添加或删除childId
//基于它是否已在阵列中
};
render（）{
const children=this.state.children.map（（child）=>(
))
返回(
{儿童}
);
}
}

---

我想知道是否有与上述代码等效的功能组件，请记住，子组件是纯组件，只有在传递给它们的道具发生变化时才应该重新播放。

事实证明，有一个名为钩子的钩子，可以用来在传递给子组件之前记忆函数。由于函数已被记忆，因此如果函数不不同，相等比较将返回true。问题中的代码将简单地重写如下：

const Parent = () => {
  const [children, setChildren] = useState([1, 2, 3, 4])
  const [selectedChildren, setSelectedChildren] = useState([])

  const handleChildClick = useCallback(
    childId => {
      // adds or removes childId from selectedChildren state
      // based on if it's already in the array or not
    },
    []
  )

  const childComponents = children.map((child) => (
    <Child
      key={child}
      id={child}
      onClick={handleChildClick}
      selected={selectedChildren.includes(child)}
    />
  ))

  return (
    <div>
      {childComponents}
    </div>
  );
}

const Parent=（）=>{
const[children，setChildren]=useState（[1,2,3,4]）
常量[selectedChildren，setSelectedChildren]=useState（[]）
const handleChildClick=useCallback(
childId=>{
//从selectedChildren状态添加或删除childId
//基于它是否已在阵列中
},
[]
)
const childComponents=childs.map（（child）=>(
))
返回(
{childComponents}
);
}