如何避免匿名函数的反应

如何解决如何避免匿名函数的反应

我在这里有一个场景

const Parent = () => {
    handleClick = (id) => {
        console.log(id)
    }
    return <div>
        users.map((user,index) => 
        <child key={index} onClick={(user.id)=>handleClick(user.id)} />)
    </div>
}

孩子正在使用React.memo，因此除非更改其道具，否则它不会重新渲染。我不希望在父级渲染时重新渲染子级，但在这种情况下，它将重新渲染，因为我使用的是匿名函数。我可以将 handleClick 放在 useCallback 内，但是如何避免在此处使用匿名功能。我必须在这里使用匿名函数，因为我在这里需要一些参数。

解决方法

您可以尝试使用 bind。

const Parent = () => {
    handleClick = (id) => {
        console.log(id)
    }
    return <div>
        users.map((user,index) => 
        <Child key={index} onClick={handleClick.bind(this,user.id)} />)
    </div>
}

这是 React 文档的相关部分：Passing Arguments to Event Handlers