javascript 在React中，直接传递事件处理程序和将其 Package 在箭头函数中有什么区别吗？

92vpleto 于 2023-04-28 发布在 Java

关注(0)|答案(1)|浏览(106)

这两个输入使用事件处理程序的方式在功能或性能方面有什么不同吗？

export default function App() {
  const handleChange = e => {
    console.log(e.target.value);
  }

  return (
    <div className="App">
      {/* example 1 */}
      <input onChange={handleChange}></input>

      {/* example 2 */}
      <input onChange={e => handleChange(e)}></input>
    </div>
  );
}

JavaScript

来源：https://stackoverflow.com/questions/76115758/is-there-any-difference-between-passing-an-event-handler-directly-and-wrapping-i

1条答案

按热度按时间

krcsximq1#

示例1是“更高性能”的，因为它只有1个函数而不是2个，但这绝对可以忽略不计。
另一方面，完全没有理由去做例2，因为它只是一个冗余函数，本质上与此相同：

export default function App() {

  const handleChange = e => {
    console.log( e.target.value );
  };

  const handleChange2 = e => {   // <--- this function is redundant
    handleChange(e);
  };

  return (
    <div className="App">

      {/* example 1 */}
      <input onChange={ handleChange }></input>

      {/* example 2 */}
      <input onChange={ handleChange2 }></input>

    </div>
  );
}

无论如何，你可能会把这当作一个一般性的问题，所以还有一些评论：
示例1更灵活（IMO），并且更好地将JSX代码与JS代码分开。
你可能决定改变一些东西，比如

使用useCallback，
自定义挂钩，或
将input改变为具有不同签名的定制组件，
...

...那么将函数与JSX代码分离是很好的。
另外，当你改变了很多布局，移动JSX组件时，当你不必关心太多的JS代码时，它会更好。

赞(0）回复(0）举报 2023-04-28

我来回答

javascript 在React中，直接传递事件处理程序和将其 Package 在箭头函数中有什么区别吗？

1条答案

相关问题

热门标签

最新问答