在我的按钮点击反应组件中，我将一个参数传递给我的点击处理程序，就像这个一样
<a
id={`_primaryAction_${messageObject.id}`}
href="#"
class='message'
onClick={(e: MouseEvent) =>
this.handleClick(e, messageObject)
}
>
我有一个用例，我的道具正在改变，重新渲染正在发生。因此，在每个新的渲染中，这个点击处理程序都会创建新的实例。有办法避免这种情况吗？
Edited：删除id并传递wholeObject，因为这是我的用例。是的，这是循环的。这是一个将为消息数组创建的标记。
首先，做更多的研究，看看重新渲染是否真的是一个值得关注的原因，因为从性能角度来看，这可能不是什么大事。
作为一种解决方案，您可以创建另一个传递对象的组件。
const ActionLink = (props) => {
const {
handleClick,
messageObject,
...otherProps
} = props;
const clickHandler = React.useCallback((e: MouseEvent) => {
handleClick(e, messageObject);
}, [handleClick, messageObject]);
return <a
{...otherProps}
onClick={ clickHandler }
/>;
}
export default ActionLink;
在您的情况下，您可以像下面这样使用它(而不是a(
<ActionLink
id={`_primaryAction_${messageObject.id}`}
href="#"
class="message"
messageObject={messageObject}
handleClick={this.handleClick} >...</ActionLink>
如果需要，您可以通过React.memo进一步防止重新渲染
export default React.memo(ActionLink);
最后，您可以按照其他人的建议，将id提供给链接的属性，并在handleClick方法中使用该方法从列表中检索正确的消息
类似的东西
<a
id={`_primaryAction_${messageObject.id}`}
href="#"
class='message'
data-message-id={messageObject.id}
onClick={this.handleClick}
>
以及在您的handleClick中
handleClick(e){
const messageId = e.target.getAttribute('data-message-id');
// assuming your message list is named messageList
// adjust accordingly
const message = messageList.find(({ id }) => id === messageId);
// ... do what you were already doing with the message here
}
结账使用回调
useCallback将返回回调的记忆版本，该版本只有在其中一个依赖项发生更改时才会更改。当将回调传递给依赖引用相等的优化子组件以防止不必要的呈现时，这很有用
https://reactjs.org/docs/hooks-reference.html#usecallback
我认为您使用的是类组件
由于你想传递一个对象，我认为它是动态的，而不是组件中的某个常量(即对象是映射的一部分(，并且不想在每次渲染时创建一个新函数，我建议你将按钮属性的值设置为对象的值，你可以访问它e.target.value并绑定该方法，而不是使用内联回调
现在它不会创建新的功能，这是的工作示例
我看到您使用的是类组件。在这种情况下，只需将处理程序移动到一个单独的函数中即可。
class MyComponent extends React.Component {
handleClick = (e) => {
this.deleteRow(id, e)
}
render() {
return <button onClick={this.handleClick}>Delete Row</button>
}
}