如何在反应中避免匿名函数答案

【问题标题】：How to avoid anonymous function in react如何在反应中避免匿名函数
【发布时间】：2021-02-02 02:17:09
【问题描述】：

我这里有一个场景

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，所以它不会重新渲染，除非它的 props 被改变。我不希望在父级渲染时重新渲染子级，但在这种情况下它将重新渲染，因为我使用的是匿名函数。我可以把 handleClick 放在 useCallback 里面，但是我怎样才能避免这里的匿名函数。我必须在这里使用匿名函数，因为我在这里期待一些参数。

【问题讨论】：

可以给我们看一个不传递匿名函数的例子吗？
在子组件本身中，每当模拟点击时，调用props.onClick并传递id。这样您就可以摆脱父级中的匿名函数。
“我不希望孩子被重新渲染”何必呢？你有多少子组件？这很可能是过早的优化。

标签： javascript reactjs optimization frontend

【解决方案1】：

您可以尝试使用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

【讨论】：