从使用.bind(this)转换代码为箭头函数

Question

我最近得知在render函数中使用bind(this)不好，因为它每次都会创建全新的函数。因此，我正在转向使用箭头函数，如下所示，在两个元素中。

我的问题是关于map函数。它也使用.bind(this)。有没有一种方法可以将其转换为ES6/7格式？

return (
    <div>
        <button onClick={()=>this.changeDisplayType("images")}>Images</button>
        <button onClick={()=>this.changeDisplayType("audio")}>Audio</button>
        {
            resources.map(function(resource) {
                return (
                    <div key={resource.id}>
                        <div style={{fontWeight: "bold"}}>{resource.name}</div>
                        <div>({resource.info})</div>
                    </div>
                )
            }.bind(this))
        }


    </div>
)

我刚刚意识到，我完全可以删除 .bind(this) ，我的代码仍然可以正常工作。因此，我也想知道它是否存在有什么区别。

- kojow7

Answer 1

有没有办法将这个转换为ES6/7格式？

是的，您可以使用箭头函数来编写如下代码:

resources.map(resource => {
    return (
        <div key={resource.id}>
            <div style={{fontWeight: "bold"}}>{resource.name}</div>
            <div>({resource.info})</div>
        </div>
    )
})

我完全可以去掉 .bind(this)，但我的代码仍能正常工作。为什么？

因为在 map 函数的主体中，您没有使用 this 关键字，这意味着如果您尝试访问任何类属性或方法而没有绑定回调方法，它将会抛出错误。

尝试一下：去掉绑定并尝试在 map 函数的主体中访问状态值，它将会抛出错误。

- Mayank Shukla

---

啊，是的，你说得对，谢谢。我当时在复制另一个模块，只使用了一个不包含 this 的较小子集。所以，为了确保我完全理解一切：当在 map 函数体内使用 this 时，箭头函数更高效，因为该函数不会被重新创建。然而，如果我在 map 函数体中不使用 this，那么我可以省略 .bind(this)，两种方法的效率几乎相同，是吗？ - kojow7

如果您在map函数体中没有使用this，则可以省略.bind(this)和箭头函数。就重新创建函数而言，据我所知，箭头函数会在每次重新渲染时创建新的函数。如果要避免这种情况，请像这样编写：resources.map(this._functionName)并在构造函数中绑定此方法，现在只有一个引用存在。 - Mayank Shukla

好的，谢谢你的回答和进一步的解释。看起来我可能对箭头函数的某些内容有所误解。 - kojow7

检查一下这个文档关于 onClick={(e) => this.handleClick(e)} 的说明。这种语法的问题在于每次组件渲染时都会创建一个不同的回调函数。链接（页面最后一段） - Mayank Shukla