在 react 基于函数的组件的 return 语句性能中定义箭头函数答案

【问题标题】：Defining arrow function in react function-based component's return statement performance在 react 基于函数的组件的 return 语句性能中定义箭头函数
【发布时间】：2020-06-09 08:25:42
【问题描述】：

在 React 基于函数的组件的 return 语句中而不是在组件的主体中定义箭头函数是否有任何性能损失？例如，哪个更好，为什么，这个：

const Test = () => {
  const [isPopupOpen, setPopupOpen] = React.useState(false);

  return (
    <Popup handleClose={() => setPopupOpen(false)}>Anything</Popup>
  )
}

const Test = () => {
  const [isPopupOpen, setPopupOpen] = React.useState(false);

  // we use a hook so we cannot move it out of the component entirely
  const closePopup = () => setPopupOpen(false)

  return (
    <Popup handleClose={closePopup}>Anything</Popup>
  )
}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

除了第二个在函数的执行上下文中创建一个绑定（松散地，一个“变量”）而第一个没有之外，两者都做完全相同的事情。这不会以任何明显的方式影响您的表现。

【讨论】：

【解决方案2】：

不，它不会对应用程序产生任何性能影响。提供第二个将帮助您在更新状态之前实现任何业务逻辑。事实上，你也可以用第一个来做，但为了便于阅读，如果你想要一些额外的逻辑，第二个将是首选。否则，对于直接狭窄的实现，您最好使用第一个。

【讨论】：