通过React中的无状态功能组件处理事件

Question

我遇到了两种通过无状态功能组件处理事件的方法：

1）

const SomeInputComponent = ({ onTextChange }) => (

  <input type='text' onChange={(e) => onTextChange (e.target.value)} />

);

2）

const SomeInputComponent = ({ onTextChange }) => {

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

  return (
    <input type='text' onChange={handleChange} />
  );
};

哪一个更可取？ 优点和缺点是什么？

Answer 1

我的观点是，这主要是关于可读性，可重用性等方面的。个人而言，我尝试使用选项2，但如果它确实是简单的组件，并且我永远都不会重用处理程序，那么我有时会选择选项1。

但是，我对此并不满意，并尝试坚持使用第二种选择。 为什么？ 因为通常我认为我不会重用该处理程序，或者我总是认为它是单行的，但是后来我最终重写了它，因为我正在重用它或向它添加更多代码（通常是简单的console.log ）。 那浪费时间。

所以我是为了保持一致性。 始终使用选项2。