如何通过高阶函数解决React事件处理函数渲染时自动触发的问题

问题原因 #

你当前的写法会在组件渲染时直接执行onClick(value)，并将函数执行后的返回值（此处为undefined）赋值给onClick属性，因此会出现渲染时自动触发、点击时无响应的问题。

高阶函数改造方案 #

将原函数改造成接收参数后返回新事件处理函数的高阶函数即可，改造后的代码如下：

const onClick = (param) => () => {
  console.log(param)
}

此时你可以直接使用你想要的调用方式：

<Button onClick={onClick(value)} />

调用onClick(value)时只会返回一个未执行的匿名函数，只有触发按钮点击事件时，这个匿名函数才会被执行，不会在渲染阶段自动触发。

可选拓展：支持接收事件对象 #

如果需要在处理逻辑中拿到事件对象，可以调整为如下写法：

const onClick = (param) => (e) => {
  // 可在此处处理事件对象逻辑，比如阻止默认行为 e.preventDefault()
  console.log('事件对象：', e)
  console.log('传入的参数：', param)
}

性能优化提示 #

如果你的Button组件使用React.memo做了重渲染优化，这种每次调用生成新函数实例的写法会导致memo失效，可配合useCallback缓存函数生成逻辑：

import { useCallback } from 'react'

// 依赖项数组按实际业务逻辑填写，这里假设逻辑内没有外部依赖
const onClick = useCallback((param) => () => {
  console.log(param)
}, [])

内容的提问来源于stack exchange，提问作者komarnytskiyIvan