如何避免react中的匿名函数

Question

我这里有一个场景

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 内部，但是如何避免这里的匿名函数。我必须在这里使用匿名函数，因为我在这里期待一些参数。

Answer 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 文档的相关部分：将参数传递给事件处理程序

Answer 2

虽然这是一个老问题，但这是我会采取的方法（如果它对其他人有帮助）

1. 向元素添加一个属性，其中包含要作为值传递的参数，例如

   id={user.id}

2. 然后只需在

   onClick

   属性中传递处理程序的名称，并从处理程序函数中的

   event.target

   中提取属性

注意：您不必传递

event

参数，因此无需构建匿名函数

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