为什么JSX道具不应该使用箭头功能或绑定？

Sam蛋蛋Itachi2020-03-12

我正在用我的React应用程序运行lint，并且收到此错误：

error    JSX props should not use arrow functions        react/jsx-no-bind

这是我运行箭头功能（在里面onClick）的地方：

{this.state.photos.map(tile => (
  <span key={tile.img}>
    <Checkbox
      defaultChecked={tile.checked}
      onCheck={() => this.selectPicture(tile)}
      style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}}
    />
    <GridTile
      title={tile.title}
      subtitle={<span>by <b>{tile.author}</b></span>}
      actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>}
    >
      <img onClick={() => this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/>
    </GridTile>
  </span>
))}

是否应避免这种不良做法？最好的方法是什么？

NearItachi2020/03/12 16:29:02

您可以使用react-cached-handler库使用箭头功能，而无需担心重新渲染性能：

注意：在内部，它通过指定的键缓存箭头功能，无需担心重新渲染！

render() {

  return <div>
  {
        this.props.photos.map(photo=>
          <Photo key={photo.url}
            onClick={this.handler(photo.url, (url) => { 
                 console.log(url) })}
          />)
   }
 </div>

}

其它功能：