Question

我有一个小的组件可以更改网站的语言。由于eslint配置了jsx-no-bind，所以它会在下面的代码中引发错误。

const ChangeLanguage = ({ toggleLanguage }) => {

    const toggle = () => {
        console.log('hi')
        toggleLanguage()
    }

    return (
        <IconButton
            onClick={toggle}
        >
            <Language /> // this is an svg-icon
        </IconButton>
    )
}

export default connect(null, { toggleLanguage })(ChangeLanguage)

我搜索了jsx-no-bind的用法。有人说我们应该启用它，因为在每个渲染javascript中，JavaScript都会生成新函数，并且会导致不必要的渲染（例如airbnb代码约定[link]）。但另一些人则表示，其性能改进可忽略不计，并且降低了代码的可读性（例如[link]）。这是两个问题：

如何解决错误（即不禁用jsx-no-bind）。
您对jsx-no-bind配置有何建议（即我是否应该将其完全/部分从eslint配置中删除？）。

PS：在网络上有更多关于将箭头功能或绑定方法作为道具传递的文档。但是我在问题陈述中只提到了其中两个。

Answer 1

之所以发生这种情况，是因为您在组件的return语句中传递了一个函数，并且每次重新渲染组件时都会创建一个新函数。

为避免这种情况，您只能使用它的引用。像这样

const ChangeLanguage = ({ toggleLanguage }) => {
return (
    <IconButton
        onClick={toggleLanguage} // <----->
        <Language /> // this is an svg-icon
    </IconButton>
 )
}

export default connect(null, { toggleLanguage })(ChangeLanguage)

Answer 2

如果我们这样做，eslint不会抱怨：

const ChangeLanguage = ({ toggleLanguage }) => {

    function toggle () {
        console.log('hi')
        toggleLanguage()
    }

    return (
        <IconButton
            onClick={toggle}
        >
            <Language /> // this is an svg-icon
        </IconButton>
    )
}

export default connect(null, { toggleLanguage })(ChangeLanguage)

但是我不确定有什么区别。在这种情况下，React是否不再在每个渲染器上创建函数，或者只是规则无法识别它？

如何解决功能组件上的jsx-no-bind错误？

2 个答案: