时间戳

首页 > 解决方案 > 何时使用箭头功能

reactjs - 何时使用箭头功能

问题描述

我开始尝试学习 React（带有在线诅咒）。但是有一个理解问题：

有时我用箭头函数调用函数。示例：（缩短）

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

但有时我将函数称为...函数？！

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

我试图谷歌它，但我无法得到这个问题的答案。

标签： reactjs

解决方案

事件处理程序喜欢onChange并将onClick“onX”事件传递给附加的处理程序。这就是onChange={handleChange}wherehandleChange明确接受事件并解构target价值的情况。

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

如同

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

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

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

这setColor是一个状态更新函数，我们想明确地将值“green”传递给它。如果您要这样做，onClick={setColor}那么单击事件对象将被传递给状态更新程序并保存在状态中，这不是所需的行为。

您还将遇到一些代码示例或某些开发人员所做的代码：

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

但如上所示，这可以很简单地更直接地表示为

onClick={myCallback}

我想在这里展示的一点是，当回调的函数签名与处理程序的函数签名匹配时，匿名函数对于代码正常运行来说不是必需的。而是当它们之间存在“不匹配”时，需要一个“代理”函数来将回调与处理程序配对。

推荐阅读