React — 如何在处理程序中正确访问自定义参数
什么时候
如何
优势
简而言之——你可以在处理程序中访问渲染时值，而无需使用匿名箭头函数。提示——利用数据属性。
React 在很多方面都很出色，它让我们能够以不同的方式做事，减少主观臆断（或者说不带主观臆断）。
最近几天，尤其是在 hooks 发布之后，社区一直在热议引用相等性以及渲染中的匿名箭头函数对性能的不利影响。
我们不会深入探讨在渲染过程中使用箭头函数为何或如何影响性能（或者不影响性能）。以下两条对比鲜明的推文可供参考。
什么时候
我们在渲染过程中主要使用箭头函数，只是为了将自定义参数传递给事件处理程序。
例如，这是一个常见的用例——
const MyComp = () => {
const handleClick = (e, id) => {
// handle click and use id to update state
}
// id comes from state
return (
<div onClick={(e) => handleClick(e, id)}>Hello World!</div>
)
}
如何
这里我们不用匿名箭头函数，而是可以利用数据属性并访问事件对象的值。
const MyComp = () => {
const handleClick = (e) => {
const id = e.target.dataset.id
// handle click and use id to update state
}
// id comes from state
return (
<div data-id={id} onClick={handleClick}>Hello World!</div>
)
}
优势
这种方法有很多优点——
- 如果需要，可以很轻松地将回调函数缓存起来。
const MyComp = () => {
// id comes from state
const handleClick = React.useCallback((e) => {
const id = e.target.dataset.id
// handle click and use id to update state
}, [id])
return (
<div data-id={id} onClick={handleClick}>Hello World!</div>
)
}
-
在组件渲染期间，您无需创建新函数，这节省了虚拟 DOM 差异计算期间的额外计算成本。
-
如果使用React.memo的子组件将此处理程序作为 prop，则无需编写自定义的areEqual方法来规避匿名箭头函数的引用完整性问题。
请注意，即使您传入其他基本类型，所有数据属性也都会返回字符串值。因此，从数据集中提取数据时，最好强制转换值类型。
const id = e.target.dataset.id // this will be String
const id = Number(e.target.dataset.id) // convert to type if needed
我创建了一个 codesandbox 来演示它的工作原理——处理程序中的自定义参数
你太棒了！祝你今天过得愉快！⚡️
文章来源：https://dev.to/flexdinesh/react-access-custom-params-in-handlers-the-right-way-44mi