javascript - 命名函数是 jsx Prop 的好习惯吗？

Question

如果我有一个由 javascript 生成的 div 数组，它们都应该传入自己的 onClick 函数，我可以轻松地使用箭头函数使它们都按照我想要的方式运行。但是 ESLint 强调这是不好的做法，如果所有标志都打开，则没有箭头函数或绑定(bind)甚至常规函数。所以这是我一直在做的一个解决方法，我想知道这是否是好的做法，或者我是否只是在愚弄我的 linter 而没有得到任何好处？

如果我这样做:

const array = [0, 1, 2, 3]

array.map((d, index) => {
  return <div onClick = {
    () => myGeneralMethodOrFunction(index)
  }
  />
})

它可能看起来很整洁，但会触发我的 linter，所以我改为这样做:

const array = [0, 1, 2, 3]

array.map((d, index) => {
  function onThisClick() {
    myGeneralMethodOrFunction(index)
  }
  return <div onClick = {onThisClick}/>
})

我只是不确定命名函数是否对实际解决我的 linter 试图让我的地址消失的问题有什么不同(这是箭头函数等会造成不必要的重新渲染)

当您认为将 onThisClick() 直接写入 div onClick={} 也会触发 linter 时，这似乎特别可疑，尽管我不知道这与我正在做的有何不同。

这就是我所说的错误:https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

想法？

Answer 1

原因可能是，每次执行渲染时都会创建匿名函数，而命名函数则不会。 虽然这不是什么大问题，但在 React 社区中它被认为是一种很好的实践。

有关该主题的更多信息，请查看这篇精彩的文章 https://medium.com/@rjun07a/binding-callbacks-in-react-components-9133c0b396c6

您可以试试下面的代码。

const array = [0, 1, 2, 3]

class Example extends React.Component {

  // Method currying with extra bound variable from callbacks
  onThisClick = (index) => (event) => {
    // Your execution on index which you send in render method
  }

  render() {
    return(
      array.map((d, index) => (
         <div 
          key={index}
          onClick={this.onThisClick(index)}
         />
        )
      )
    )
  }
}