Javascript 是否有此React prop函数被包装的原因？

如果查看React-tic-tac-toe教程，您会发现当

Square

从a更改时，作者会删除属性周围的箭头函数包装：

注

当我们将正方形修改为函数组件时，我们还将

onClick={（）=>this.props.onClick（）}

更改为较短的

onClick={props.onClick}

（注意两边没有括号）

首先，是否有必要使用arrow函数包装？似乎不需要一个闭包来捕获

这个

---

编辑：

---

答案是组件不需要包装，就像它的函数版本需要包装一样，但这两个答案都给出了包装函数调用的充分理由。我接受了这个，因为它是第一个到达的。

它仍然使用箭头函数

它只是在函数被传递到

onClick
Square
组件的
prop时使用它。（您正在查看的代码部分是从该道具读取的）

this.handleClick（i）}
/>

它必须做一些事情将
this
值绑定到组件，因为该函数在内部使用
this
。
包装/不包装函数的一个关键区别在于参数

通常，
onClick
回调将事件对象作为第一个参数：

onClick = function (e) {
  e.preventDefault()
  e.stopPropagation()
  e.target 
  ...etc...
}

onClick={() => this.props.onClick()}

考虑到论点的存在，让我们比较两个选项：

onClick = function (e) {
  e.preventDefault()
  e.stopPropagation()
  e.target 
  ...etc...
}

onClick={() => this.props.onClick()}

这里您创建了一个没有参数的函数，因此
e
事件被忽略，而
this.props.onClick（）
在没有任何参数的情况下被调用

onClick={props.onClick}

这里您没有创建任何“中间件”：
props.onClick
将接收事件作为第一个参数

onClick={props.onClick}

这种差异通常是没有意义的，但如果
props.onClick
对象实际上有第一个参数，尤其是当它有默认参数时，可能会产生一些问题。假设您的最终onClick处理程序如下所示：

const exampleOnClick = (firstArgument = false) => {
}

注意：不包装函数是很好的，它应该更有效一点（您不会在每次渲染时为每个组件创建附加函数）。只需考虑和注意到差异
要么你需要在构造函数中绑定，要么不用箭头函数。不，根本没有。我尝试了没有包装的组件，它看起来很好。<代码> OnCase= {（）= >这个。PROSP.OnCLCKEL（）>允许代码传递自定义参数，如“代码> OnCase= {（））=这个。道具。点击（1）}。
。但是不包装，它会将click事件对象传递给该函数。@HaoWu您可以创建一个通用回调来传递自定义参数，即
const-onClick=customArg=>event=>{…}
并设置为callback
onClick={props.onClick（1）}
。这将自定义参数封装在回调实例中，如果需要，它仍将接收事件对象。