通過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。