Javascript 如何使用useCallback修复map函数中无用的渲染？

我是《反应》杂志的新人，我有一个问题。例如，我们有以下代码：

// module with optimized React component to avoid useless renders

const Button = ({ onClick, ... }) = > {

}

export default class React.memo(Button);

// module with list

const List = ({ items }) => {
  const onSelect = item => {
    // ... do some actions with item
  };

  return (
    <div>
      {items.map(item => <Button onClick={() => onSelect(item)} />)}
    </div>
  )
}

//模块带有优化的React组件，以避免无用的渲染
常量按钮=（{onClick，…}）=>{
}
导出默认类React.memo（按钮）；
//带列表的模块
常量列表=（{items}）=>{
const onSelect=项目=>{
//…对项目执行一些操作
};
返回(
{items.map（item=>onSelect（item）}/>）}
)
}

如您所见，在上面的代码中，按钮组件将丢失所有优化，因为onClick属性在每次渲染时都会有一个新链接。我如何修复它，使按钮与React.memo优化正确工作？

例如：

const Component =(props) => {
   const onEvent = useCallback(() => someAction(props.id), []);
   return (
      <BottleNeckComponent onEvent={ onEvent } />
   );
}

const Mapping = ({ ids }) => {
  return ids.map(id => {
    return <Component key={id} id={id} />
  });
};

const组件=（道具）=>{
constOneEvent=useCallback（（）=>someAction（props.id），[]）；
返回(
);
}
常量映射=（{ids}）=>{
返回id.map（id=>{
返回
});
};

例如：

const Component =(props) => {
   const onEvent = useCallback(() => someAction(props.id), []);
   return (
      <BottleNeckComponent onEvent={ onEvent } />
   );
}

const Mapping = ({ ids }) => {
  return ids.map(id => {
    return <Component key={id} id={id} />
  });
};

const组件=（道具）=>{
constOneEvent=useCallback（（）=>someAction（props.id），[]）；
返回(
);
}
常量映射=（{ids}）=>{
返回id.map（id=>{
返回
});
};

这是过早的优化。除非您发现某个组件多次进行不必要的渲染并导致性能问题，否则您不应采取任何措施。useMemo和UseCallback都有开销，所以在需要之前不应该使用它们。

这是过早的优化。除非您发现某个组件多次进行不必要的渲染并导致性能问题，否则您不应采取任何措施。useMemo和UseCallback都有开销，所以在需要之前不应该使用它们。

@malcoauri，我想就是这样。我没有测试它，但我认为它会起作用：）

//模块带有优化的React组件，以避免无用的渲染
常量按钮=（{onClick，…}）=>{
}
导出默认类React.memo（按钮）；
//带列表的模块
常量列表=（{items}）=>{
const onSelect=（项）=>useCallback（（）=>onSelect（项），[]）；
返回(
{items.map（item=>）}
)
}
@malcoauri，我想就是这个了。我没有测试它，但我认为它会起作用：）

//模块带有优化的React组件，以避免无用的渲染
常量按钮=（{onClick，…}）=>{
}
导出默认类React.memo（按钮）；
//带列表的模块
常量列表=（{items}）=>{
const onSelect=（项）=>useCallback（（）=>onSelect（项），[]）；
返回(
{items.map（item=>）}
)
}
这是正确的，但这是一个学习的例子，以便在问题出现时找到解决问题的方法：）这是正确的，但这是一个学习的例子，以便在问题出现时找到解决问题的方法：）请使用我的组件，例如，因为您的组件不同）请，以我的组件为例，因为你的组件不一样）FWIW，这是超基本的，有很多博客文章都在做这件事。如果这很简单，请给我任何链接：）字面上是我搜索“useCallback react”-FWIW时的第一个链接，这是超基本的，有很多博客文章都在做这件事。如果这很简单，请给我任何链接：）我搜索“useCallback react”时的第一个链接-它不起作用，对不起。onClickEvent如何知道应该使用哪个项目？@Malcaouri抱歉，我已修复。现在它可以拿到物品了，兄弟，又不行了。onClick必须获得命名函数，不能是匿名函数function@malcoauri这是错误还是Eslint警告？您是否可以尝试绑定onSelect函数，例如：
onSelect.bind（null，item）
而不是
（）=>onSelect（item）
？它的代码无法解决问题dude带来的问题。如果Button onClick属性获取匿名函数，则Button React.memo优化将被破坏。抱歉，它将不起作用。onClickEvent如何知道应该使用哪个项目？@Malcaouri抱歉，我已修复。现在它可以拿到物品了，兄弟，又不行了。onClick必须获得命名函数，不能是匿名函数function@malcoauri这是错误还是Eslint警告？您是否可以尝试绑定onSelect函数，例如：
onSelect.bind（null，item）
而不是
（）=>onSelect（item）
？它的代码无法解决问题dude带来的问题。如果Button onClick属性获取匿名函数，则Button React.memo优化将被破坏。