React中bind绑定与箭头函数调用事件的性能及优缺点对比

以下是问题中提到的两种写法示例：

方法1：内联箭头函数传参 #

const ComponentA = () => {
  const handleClick = (something) => {
    console.log(something)
  }
  return <div onClick={() => handleClick("Hello world")} />
}

方法2：bind预传参 #

const ComponentA = () => {
  const handleClick = (something) => {
    console.log(something)
  }
  return <div onClick={handleClick.bind(this, "Hello world")} />
}

效果一致性 #

在你给出的函数组件示例中，两种写法的最终运行效果完全一致：点击div时都会触发handleClick执行，正确传入"Hello world"参数打印结果。
需要注意的是，函数组件本身没有实例this，且示例中的handleClick本身是箭头函数（已词法绑定this），因此方法2中bind传入的第一个this参数实际上不会生效，没有实际作用。

性能表现 #

两种写法的性能几乎没有可感知的差异：

• 每次组件重新渲染时，方法1会创建一个新的匿名箭头函数实例
• 每次组件重新渲染时，方法2会调用bind返回一个新的绑定后函数实例
  两者都会生成新的函数引用，如果你把这个onClick传给用React.memo包裹的子组件，都会因为props引用变化触发子组件的不必要重渲染，在性能损耗上没有本质区别。

各自优缺点 #

方法1：内联箭头函数写法 #

优点：

• 语法直观易懂，符合普通JS函数的书写习惯，新手门槛更低
• 无需关心this绑定逻辑，不会出现this指向错误的问题
• 传参灵活性更高，事件对象和自定义参数的传递顺序可以自由控制，比如需要用到事件对象时可以直接写onClick={(e) => handleClick(e, "Hello world")}
  缺点：
• 需要用到事件对象时必须显式传递，新手容易漏写导致拿不到事件对象
• 当回调逻辑复杂、嵌套层级多时，内联写法会让JSX部分显得臃肿

方法2：bind预传参写法 #

优点：

• 事件对象会自动作为最后一个参数传入绑定的函数，不需要显式声明传递，比如handleClick定义为(something, e) => {}时，直接用bind传自定义参数即可，事件对象会自动注入
• 在类组件的非箭头函数类方法场景中，可以同时完成this修正和参数预设，不需要写额外的箭头函数
  缺点：
• 对bind机制不熟悉的新手很容易写错第一个this参数，尤其是在函数组件中this为undefined的场景下，容易出现意料之外的this指向问题
• 语法可读性不如箭头函数，参数传递顺序是隐式的，代码维护时需要对照函数定义才能理清参数逻辑
• 没有任何性能优势，早期网传bind性能优于箭头函数的结论在现代JS引擎中已经不成立

可选优化方案 #

如果需要避免每次渲染生成新函数，可以改用以下写法，消除额外函数创建的开销：

const ComponentA = () => {
  const handleClick = (e) => {
    console.log(e.currentTarget.dataset.something)
  }
  return <div data-something="Hello world" onClick={handleClick} />
}

也可以配合useCallback缓存函数引用，减少不必要的子组件重渲染。

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