React列表渲染中箭头函数的正确用法是：事件处理器必须写在JSX属性中（如onClick={() => handleDelete(item.id)}），而非在map回调里直接调用函数，否则会立即执行、导致误删和警告；map自身的箭头函数回调无问题。

在 React 列表渲染中用箭头函数，核心是：**事件处理要写在 JSX 属性里（如 onClick），而不是直接在 map 回调里执行逻辑**。否则每次渲染都会新建函数、触发子组件重渲染，还可能引发闭包问题。

✅ 正确写法：箭头函数作为事件处理器

把箭头函数写在 JSX 的事件属性中，让它在用户交互时才执行：

{items.map((item, index) => (
  <li key={item.id}>
    {item.name}
    <button onClick={() => handleDelete(item.id)}>删除</button>
  </li>
))}

这样 handleDelete 是预定义好的函数（比如在组件顶层或 useCallback 中定义），箭头函数只是“包装一层”，传递正确参数。

⚠️ 常见错误：在 map 里直接调用函数

下面这种写法是错的 —— 渲染时就立即执行，不是等点击：

React Native Skills

{"answer":"构建高性能移动应用的 React Native 与 Expo 最佳实践。适用于构建组件、优化列表性能、实现……"}

下载

立即学习“Java免费学习笔记（深入）”；

{items.map((item) => (
  <li key={item.id}>
    <button onClick={handleDelete(item.id)}>删除</button> {/* ❌ 执行了！不是传函数 */} 
  </li>
))}

这会导致：
- 页面一渲染就删数据；
- onClick 接收到的是 undefined（因为 handleDelete 没返回值）；
- React 报 warning：“Expected onClick listener to be a function”。

? 优化建议：用 useCallback 缓存事件函数（尤其带依赖时）

如果事件函数依赖 props 或 state，又想避免子组件不必要的重渲染，可以提前用 useCallback 定义：

const handleClick = useCallback(
  (id) => {
    setSelectedId(id);
    trackEvent('item_clicked');
  },
  [setSelectedId]
);

然后在列表里使用：

{items.map(item => (
  <Item 
    key={item.id} 
    data={item} 
    onClick={handleClick} // ✅ 传函数引用
  />
))}

? 小贴士：map 里的箭头函数本身没问题，但别混淆“定义”和“调用”

items.map((item) => ...) 这个箭头函数是 map 方法需要的回调，完全正常；
真正要注意的是：**JSX 属性里该传函数引用，而不是调用结果**。

简单记：有括号 () 就是执行，没括号才是传函数。比如：
- onClick={handleClick} ✅
- onClick={handleClick(item.id)} ❌
- onClick={() => handleClick(item.id)} ✅（需要闭包传参时）