命名函数是 jsx 道具的好习惯吗？

Question

如果我有一个由 javascript 生成的 div 数组，它们都应该有自己的 onClick 函数传入，我可以轻松地使用箭头函数使它们都以我想要的方式运行。但是 ESLint 强调这是不好的做法，如果所有标志都打开，则没有箭头函数或绑定甚至常规函数。所以这是我一直在做的一种解决方法，我想知道这是否是一种好的做法，或者我只是在愚弄我的 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)}
         />
        )
      )
    )
  }
}