何时使用箭头功能答案

【问题标题】：When to use arrow function何时使用箭头功能
【发布时间】：2021-03-14 03:56:31
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： reactjs

【解决方案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);
}

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

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

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

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

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

但如上所示，这可以更直接地表达为

onClick={myCallback}

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

【讨论】：

【解决方案2】：

只要你想明确地传递参数，你可以使用下面的方法，

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

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

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

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

【讨论】：