栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

JSX道具不应该使用.bind()-如何避免使用bind?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

JSX道具不应该使用.bind()-如何避免使用bind?

您应该首先了解 为什么 这是一个不好的做法。

这里的主要原因

.bind
是返回一个新的函数引用。
每次
render
通话都会发生这种情况,这可能会导致性能下降。

您有2个选择:

  1. 将构造函数用于
    bind
    您的处理程序(这只会运行 一次 )。
        constructor(props) {      super(props);      this.showSuccess = this.showSuccess.bind(this);    }
  1. 或使用箭头函数创建处理程序,以便它们将使用的词法上下文
    this
    ,因此您完全不需要
    bind
    它们(您需要babel插件):
        showSuccess = () => {      this.setState({        showSuccess: true,      });    }

你应该 使用这种模式(如其他建议):

showSuccess={() => this.showSuccess()}

因为这也会在每个渲染器上创建一个新函数。
因此,您可以绕过该警告,但仍在以不良做法设计编写代码。

从ESLint文档:

JSX
prop中的绑定调用或箭头函数将在每个渲染器上创建一个全新的函数。这对性能不利,因为这将导致以不必要的方式调用垃圾回收器。如果将全新功能作为道具传递给使用该道具上的引用相等性检查来确定是否应更新的组件,则这也可能导致不必要的重新渲染。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/616490.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号