React – 以正确的方式访问处理程序中的自定义参数
TL; DR – 您可以在处理程序中访问渲染时间值，而无需使用匿名箭头功能。提示 – 利用数据属性。
React在很多方面都很出色，它让我们可以通过不那么自以为是（或没有见解）的方式以不同的方式做事。
最近几天，特别是在钩子发布之后，社区一直在讨论引用平等以及渲染中的匿名箭头功能如何对性能不利。
我们不会深入研究为什么或如何在渲染过程中使用箭头函数影响性能（或者不这样做）。以下是针对上下文的两条截然不同的推文。
shawn swyx wang?@swyx
@ryanflorence @ConAntonakos TFW你意识到“但在渲染中创建功能是一个反模式”的人群仍然是对的，但他们不知道为什么在2019年5月23日下午23:44
2
6
Kent C. Dodds @kentcdodds 请停止内联功能不是你的BOTTLENECK twitter.com/ferdaber/statu … 15:48 PM – 2019年6月4日 Ferdy Budhidharma @ferdaber我不会撒谎，我担心React特定的面试测试或问题，因为有很多FUD，有人可能会因为我内联我的箭头功能而从我身上敲点。 0 34
为什么
我们主要在渲染期间使用箭头函数将自定义参数传递给事件处理程序。
例如，这是一个常见的用例 –
常量 MyComp = （） => { 常量 handleClick = （Ë， ID） => { //处理单击并使用id更新状态 } // id来自州 返回 （ <DIV 的onClick ={（Ë） => handleClick（Ë， ID）}>你好，世界DIV> ） } 怎么样
我们可以利用数据属性和访问事件对象中的值，而不是使用匿名箭头函数。
常量 MyComp = （） => { 常量 handleClick = （Ë） => { 常量 ID = Ë。目标。数据集。ID //处理单击并使用id更新状态 } // id来自州 返回 （ <DIV 数据-ID ={ID} 的onClick ={handleClick}>你好，世界DIV> ） } 好处
这种方法有很多优点 –
- 如果需要，您可以非常轻松地记忆回调。
常量 MyComp = （） => { // id来自州 常量 handleClick = 应对。useCallback（（Ë） => { 常量 ID = Ë。目标。数据集。ID //处理单击并使用id更新状态 }， （ID）） 返回 （ <DIV 数据-ID ={ID} 的onClick ={handleClick}>你好，世界DIV> ） } -
在组件渲染期间不创建新函数，这样可以在vdom diffing期间节省额外的计算成本。
-
如果使用React.memo的子组件将此处理程序作为参数，则不必编写自定义的areEqual方法来绕过与箭头函数相关的参照完整性问题。
请记住，即使传入其他基本类型，所有数据属性都会返回String值。因此，从数据中心化提取时强制实现您的价值是一种很好的做法。
常量 ID = Ë。目标。数据集。ID //这将是String 常量 ID = 数（Ë。目标。数据集。ID） //如果需要，转换为类型 我已经创建了一个代码框来演示它是如何工作的 – 自定义参数处理程序
你真了不起祝你有美好的一天 ⚡️