Question

我对我一直在阅读的一个主题有疑问，但在一个方面仍然感到困惑。

到目前为止，我一直坚持使用jsx-no-bind的ESlint规则来防止浅层属性渲染和性能问题。

问题在于render方法中的箭头功能将在每个渲染上重新创建。

但是，如果在功能组件中，在返回之外声明arrow函数，我会假设不会在每个渲染器上都重新创建它，而是每次都指向同一函数。但是ESlint规则jsx-no-bind会警告我，我不应该这样做。

这是我通常如何使用Class组件执行此操作的示例

class Click extends React.Component {
  handleClick = (event) => {
    const { onClick, id } = this.props

    onClick(id)
  }

  render () {
    return (
      <button onClick={this.handleClick}>
    )
  }
}

关于我如何看待功能组件的情况

const Click = ({ onClick, id }) => {
   const handleClick = () => {
      onClick(id)
   }

   return <button onClick={handleClick} />

}

对于最后一个，ESlint会警告我不要在JSX中使用箭头功能，但这是一个问题吗？我的假设是它与类函数相同，因为该函数不会在每个渲染器上重新创建。

功能组件中的箭头功能，外部返回，好坏

0 个答案: