为什么不应该使用箭头函数或绑定？
我正在使用我的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的。
-
每当一个函数被创build时，前面的函数就会被垃圾回收。 重新渲染许多元素可能会在animation中造成混乱。
-
使用内联箭头函数将导致
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="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看到整个解释和更多信息。;
为了避免用相同的参数创build新的函数，你可以记住函数的绑定结果，这里是一个简单的实用程序名为memobind来做到这一点： https ： //github.com/supnate/memobind
