通过反应中无状态功能组件处理事件

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。