为什么不应该使用箭头函数或绑定?

我正在使用我的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> ))} 

这是一个不好的做法,应该避免? 什么是最好的办法呢?

为什么不应该在JSX道具中使用内联的箭头函数

在JSX中使用箭头函数或绑定是一个糟糕的做法,会损害性能,因为函数是在每个渲染器上重新创build的。

  1. 每当一个函数被创build时,前面的函数就会被垃圾回收。 重新渲染许多元素可能会在animation中造成混乱。

  2. 使用内联箭头函数将导致PureComponent ,以及在shouldComponentUpdate方法中使用shallowCompare组件shallowCompare都将shouldComponentUpdate渲染。 由于每次都会重新创build箭头函数prop,所以浅比较会将其识别为对道具的更改,并且组件将会重新渲染。

正如你在下面的两个例子中看到的那样 – 当我们使用内联的箭头函数的时候,每次都会重新呈现<Button>组件(控制台显示“render button”文本)。

示例1 – 没有内联处理程序的PureComponent

 class Button extends React.PureComponent { render() { const { onClick } = this.props; console.log('render button'); return ( <button onClick={ onClick }>Click</button> ); } } class Parent extends React.Component { state = { counter: 0 } onClick = () => this.setState((prevState) => ({ counter: prevState.counter + 1 })); render() { const { counter } = this.state; return ( <div> <Button onClick={ this.onClick } /> <div>{ counter }</div> </div> ); } } ReactDOM.render( <Parent />, document.getElementById('root') ); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script> <div id="root"></div> 

这是因为如果在JSX属性中使用箭头函数,显然会在每个渲染器上创build一个新的函数实例。 这可能会对垃圾收集器造成巨大的压力,并且也会阻碍浏览器优化任何“热门path”,因为函数将被丢弃而不是被重用。

你可以在https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md看到整个解释和更多信息&#x3002;

为了避免用相同的参数创build新的函数,你可以记住函数的绑定结果,这里是一个简单的实用程序名为memobind来做到这一点: https : //github.com/supnate/memobind