何时使用箭头函数

Question

我开始了一个新的尝试来学习反应(与一个网络诅咒)。但有一个问题需要理解：

有时我用箭头函数来调用函数。例子：(简称)

const [color, setColor] = useState();
<button onClick={()=>setColor('green)}>Green</button>

但有时我叫函数就像..。功能？！

const handleChange = ({target}) => {
console.log(target.value);
}
<input onChange={handleChange} />

我试着用谷歌搜索，但我找不到这个问题的答案。

Answer 1

像onChange和onClick这样的事件处理程序将"onX“事件传递给附加的处理程序。onChange={handleChange}的情况就是这样，handleChange清楚地接受事件并构造target值。

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

同

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

在其他情况下，附加的回调可能不愿意接收事件对象，或者回调接受不同的参数，那么您将看到使用了一个匿名函数，就像第一个片段的情况一样。

onClick={() => setColor('green')}

这里，setColor是一个状态更新函数，我们希望显式地将“绿色”值传递给它。如果要执行onClick={setColor}，则单击事件对象将传递给状态更新程序并保存在状态中，这不是所需的行为。

您还会遇到一些代码示例或代码，有些开发人员这样做：

onClick={(e) => myCallback(e)}

但正如上面所示，这可以非常简单地表示为

onClick={myCallback}

这里我要说明的一点是，当回调的函数签名与处理程序的函数签名匹配时，代码不需要匿名函数才能正常工作。相反，当它们之间存在“不匹配”时，就需要一个“代理”函数来匹配对处理程序的回调。

Answer 2

当您想显式传递参数时，可以使用以下方法，

<button onClick={()=>setColor('green)}>Green</button>

如果您不想传递任何参数，那么只需为onclick处理程序提供函数，

const handleClick = () => {
   // logic here
  }

<button onClick={handleClick}>Green</button>