将使用.bind（this）的代码转换为箭头函数

我最近被告知，在渲染函数中使用bind（this）并不好，因为它每次都会创建全新的函数。因此，我正在朝着下面在两个<button>元素中使用箭头函数的方向发展。将使用.bind（this）的代码转换为箭头函数

我的问题是关于地图功能。它也使用.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），我的代码仍然可以工作。因此，我也想知道如果它存在或不存在，它会有什么不同。

来源

2017-07-16 kojow7

有没有办法将其转换为ES6/7格式？完全
resources.map(resource => { 
    return (
     <div key={resource.id}> 
      <div style={{fontWeight: "bold"}}>{resource.name}</div> 
      <div>({resource.info})</div> 
     </div> 
    ) 
}) 
我可以删除.bind（本）和我的代码仍然有效WHY：

是的，你可以通过使用arrow function写这样的吗？

因为你没有使用地图的身体this关键字，也就是说，如果您尝试访问任何类属性或方法不绑定回调方法，它会抛出错误。

试试这个：删除绑定并尝试访问地图内部的状态值，它会抛出错误。

来源

2017-07-16 06:32:21

啊，是的，你是对的，谢谢。我正在复制我的另一个模块，只是使用了一个不使用这个词的较小子集。所以，为了确保我完全理解所有内容：在地图主体中使用'this'时，箭头函数更加高效，因为函数不会被重新创建。但是，如果我在地图主体中不使用“this”这个词，那么我可以放弃'.bind（this）'，两种方法的效率几乎相同。 – kojow7

如果你没有在地图体中使用'this'，那么你可以在这个部分留下'.bind（this）'和箭头函数，关于根据我的知识重新创建函数arrow函数将在每次重新渲染时创建一个新函数，如果你想避免这种情况，那就写下来：'resources.map（this._functionName）'并且在构造函数中绑定这个方法现在只有一个引用会在那里。 –

好的，谢谢你的回答和进一步的解释。看起来我一定误解了我正在阅读的有关箭头功能的内容。 – kojow7

将使用.bind（this）的代码转换为箭头函数

回答

相关问题