您应该首先了解 为什么 这是一个不好的做法。
这里的主要原因
.bind是返回一个新的函数引用。
每次
render通话都会发生这种情况,这可能会导致性能下降。
您有2个选择:
- 将构造函数用于
bind
您的处理程序(这只会运行 一次 )。
constructor(props) { super(props); this.showSuccess = this.showSuccess.bind(this); }- 或使用箭头函数创建处理程序,以便它们将使用的词法上下文
this
,因此您完全不需要bind
它们(您需要babel插件):
showSuccess = () => { this.setState({ showSuccess: true, }); }你应该 不 使用这种模式(如其他建议):
showSuccess={() => this.showSuccess()}因为这也会在每个渲染器上创建一个新函数。
因此,您可以绕过该警告,但仍在以不良做法设计编写代码。
从ESLint文档:
JSX
prop中的绑定调用或箭头函数将在每个渲染器上创建一个全新的函数。这对性能不利,因为这将导致以不必要的方式调用垃圾回收器。如果将全新功能作为道具传递给使用该道具上的引用相等性检查来确定是否应更新的组件,则这也可能导致不必要的重新渲染。



