Javascript React最佳实践：如果我们不能在JSX onChange（）中使用arrow函数，我们如何传递自定义参数？

我正在寻找React组件中箭头函数的优雅替代品

，在父容器中使用箭头函数会导致子容器中出现性能问题。这是因为匿名箭头函数被视为新的函数实例，所以如果向下传递所述箭头函数，则每个父渲染都会导致纯组件重新渲染

我个人喜欢箭头函数的可读性。以下面的代码为例：

render() {
    return (
      <div>
        <h1>Users</h1>
        <ul>
          {this.state.users.map(user => {
            return (
               <User key={user.id} user={user} onClick={(e) => this.deleteUser(e, user.id)} />;
            )
          }}
        </ul>
      </div>
    );
}

为什么？？这是如此不可读。您如何知道this.renderUser将用户作为参数传入？你怎么知道这个。deleteUser获取用户ID作为参数传入

还有什么替代方案？现有的一种方法建议将孩子们转移到他们自己的组件中，并通过道具传递参数，但有时你不想变得如此模块化

没有比箭头功能更优雅的理智解决方案了吗？或者，为了可读性和社区采纳，我们最好还是等到React团队对此进行修补

您如何知道this.renderUser将用户作为参数传入？你怎么知道这个。deleteUser获取用户ID作为参数传入

让我们以this.state.users.mapthis.renderUser为例。正如您所知，this.state.users是一个数组。这表明map是函数。函数签名的简化形式如下所示

someArray.map(currentItem => {
    // Handle your item here
});

正如你所看到的，这需要回调。回调本身最多可以包含3个参数，我们这里只需要一个参数。现在回顾一下this.renderUser，我们可以看到它也是一个接受一个参数的函数

然后，我们可以使用它作为对前面map函数的回调。如果我们只是复制/粘贴它的实现，我们将有类似的东西

this.state.users.map(user => {
    return <User key={user.id} user={user} onClick={this.deleteUser} />;
});

---

因此，当您编写this.state.users.mapthis.renderUser时，您所做的工作与复制/粘贴函数一样。参数user在这两种情况下都是同一个

经过进一步研究，我所寻找的折衷方案可以通过JS函数返回函数来实现

由此：

<div onClick={(e) => this.doSomething(e, 'abc')}></div>

为此：

doSomething = (param) => (e) => {
   console.log(param) // 'abc'
   console.log(e.target.value) // 'hello world'
}
<input onChange={this.doSomething('abc')}></div>

---

在我看来，仍然没有这个那么优雅和可读。dosomething，'abc'}>但是工作得很好。

如果您使用带有react钩子的最新版本，您可以使用arrow函数，因为钩子避免了类引起的问题，而arrow函数的效率要低得多。检查是否有效，但我正在寻找更明确的方法。使用arrow函数，您可以看到每次传入的是什么，这让我在传入其他参数时更加清楚。例如，this.doSomething，'Steven'，'Arbitral'}>此解决方案确实绕过了linting规则，但它并没有解决传递新函数实例的性能问题，而该实例本应受到规则的保护，并增加了不必要的复杂性。///eslint disable next line reac/jsx no bind具有相同的效果。这是一个更好的解决方案。

doSomething = (param) => (e) => {
   console.log(param) // 'abc'
   console.log(e.target.value) // 'hello world'
}
<input onChange={this.doSomething('abc')}></div>