React数组组件复用同一回调：如何避免包裹匿名函数提升性能？

这个问题抓得很准——从性能角度想去掉重复创建的匿名函数，确实是React性能优化里的常见思路，答案是完全可行的，但得调整deleteProject的写法，让它能拿到目标项目的信息。下面给你几个实用的方案，按性能优化优先级排序：

方案一：利用HTML data-* 属性（最优性能） #

这是最推荐的方案，因为既不会创建新函数，也能稳定拿到项目标识：

1. 渲染按钮时，把项目的唯一标识（比如id，别直接存整个对象，因为data属性只能存字符串）放到自定义data属性里：

return projects.map(p => (
  <button 
    key={p.id}
    onClick={deleteProject} 
    data-project-id={p.id}
  >
    Delete
  </button>
));

2. 修改deleteProject函数，从事件对象中提取这个标识，再找到对应项目执行删除：

const deleteProject = useCallback((e) => {
  // 从事件目标的dataset里取出项目id
  const targetProjectId = e.target.dataset.projectId;
  // 这里根据id找到要删除的项目，执行你的删除逻辑
  console.log("要删除的项目ID：", targetProjectId);
}, []);

方案二：封装Memoized子组件（兼顾性能与可读性） #

如果觉得data属性不够直观，或者需要传递整个项目对象，可以把按钮抽成独立的、用React.memo包裹的组件，避免不必要的重渲染：

1. 封装子组件：

const DeleteButton = React.memo(({ project, onDelete }) => {
  // 这里的匿名函数只会在组件初始化时创建一次（因为props不变的话，组件不会重渲染）
  return <button onClick={() => onDelete(project)}>Delete</button>;
});

2. 父组件中使用这个组件：

return projects.map(p => (
  <DeleteButton 
    key={p.id}
    project={p} 
    onDelete={deleteProject} 
  />
));

因为deleteProject用useCallback缓存了引用，只要project的引用不变，DeleteButton就不会重复渲染，性能和方案一差不多，但代码可读性更强。

方案三：用bind绑定参数（不推荐用于性能优化） #

这个方法能实现需求，但性能上和匿名函数没区别——因为每次map都会生成一个新的绑定函数，还是会触发子组件（这里是button）的重渲染：

1. 渲染时用bind把项目参数绑定到deleteProject：

return projects.map(p => (
  <button 
    key={p.id}
    onClick={deleteProject.bind(null, p)}
  >
    Delete
  </button>
));

2. 修改deleteProject，第一个参数就是目标项目，事件对象是第二个参数：

const deleteProject = useCallback((project, e) => {
  // 直接使用project参数执行删除逻辑
  console.log("要删除的项目：", project);
}, []);

如果你的场景不怎么在意重渲染性能，这个写法也能用，但不符合你最初的性能优化诉求。

内容的提问来源于stack exchange，提问作者DamianoPantani