React-数组中每个组件的相同回调

Question

让我说我的React应用程序中有一个components数组：

const deleteProject = useCallback(project => {
    // something
}, []);

return (
    projects.map(p => (
        <button onClick={() => deleteProject(p)}>Delete</button>
    );
);

有没有什么方法可以只使用deleteProject函数而不将其包装到单独的回调中，即每个组件的{} => {}？这是出于性能目的。我的意思是：

 <button onClick={deleteProject}>Delete</button>

然后在deleteProject中，我需要确定要删除的项目，但是如何？它仅以点击事件作为参数

Answer 1

如果您的项目列表很长，并且看到性能问题，可以定义DeleteButton组件以避免重新渲染按钮

const DeleteButton = ({project, deleteProject}) => {
    const onClick = useCallback(
        () => deleteProject(project),
        [project, deleteProject],
    );
    return <button onClick={onClick}>Delete</button>
}

const YourComponent = ({projects, deleteProject}) => (
    <>
        {projects.map(project => <DeleteButton {...{project, deleteProject}}/>)
    </>
)