在之前的文章中，已经说明如何避免在react jsx中使用箭头函数和bind(https://medium.freecodecamp.o... 但是没有提供一个清晰的demo展示为什么要这样做。
现在来一些例子吧。
在这个例子中，我们通过使用一个箭头函数(=>)来bind用户ID到每个删除按钮中。
## index.js import React from ‘react‘;import { render } from ‘react-dom‘;import User from ‘./User‘;class App extends React.Component { ?constructor(props) { ???super(props); ???this.state = { ?????users: [ ???????{ id: 1, name: ‘Cory‘ }, ????????{ id: 2, name: ‘Meg‘ }, ????????{ id: 3, name: ‘Bob‘ } ?????] ???}; ?} ???deleteUser = id => { ???this.setState(prevState => { ?????return { ????????users: prevState.users.filter( user => user.id !== id) ?????} ???}) ?} ?render() { ???return ( ?????<div> ???????<h1>Users</h1> ???????<ul> ???????{ ??????????this.state.users.map( user => { ???????????return <User ??????????????key={user.id} ??????????????name={user.name} ??????????????onDeleteClick={() => this.deleteUser(user.id)} /> ?????????}) ???????} ???????</ul> ?????</div> ???); ?}}export default App;render(<App />, document.getElementById(‘root‘));在onDeleteClick={() => this.deleteUser(user.id)}这一行中，我们使用一个箭头函数来传递value到deleteUser 函数中。这就是问题所在了。
## User.jsimport React from ‘react‘;// Note how the debugger below gets hit when *any* delete// button is clicked. Why? Because the parent component// uses an arrow function, which means this component//class User extends React.PureComponent { ?render() { ???const {name, onDeleteClick } = this.props ???console.log(`${name} just rendered`); ???return ( ?????<li> ????????????????????<input ??????????type="button" ??????????value="Delete" ??????????onClick={onDeleteClick} ????????/> ????????{name} ?????</li> ???); ?}}export default User;看一看User.js文件。每当我登录的时候控制台都会打印出渲染执行时的console结果。我已经定义User为PureComponent。所以只有当props或者state修改时才会重新渲染User。但是当你点击删除的时候，发现render在所有User实例中触发了。
怎么会这个样子？因为()=>this.deleteUser(user.id)每执行一次就会生成一个新的函数，当然bind也是这样干的，所以在PureComponent的shallowCompare中认为onDeleteClick的值已经被修改，所以触发了重新渲染。看吧，使用箭头函数和bind会造成性能浪费，作为一个节约的程序员应该避免如此。
那我们应该怎样做呢？
请看下面的代码
import React from ‘react‘;import { render } from ‘react-dom‘;import User from ‘./User‘;class App extends React.Component { ?constructor(props) { ???super(props); ???this.state = { ?????users: [ ???????{ id: 1, name: ‘Cory‘ }, ????????{ id: 2, name: ‘Meg‘ }, ????????{ id: 3, name: ‘Bob‘} ?????], ???}; ?} ?deleteUser = id => { ???this.setState(prevState => { ?????return { ????????users: prevState.users.filter(user => user.id !== id) ??????}; ???}); ?}; ?renderUser = user => { ???return <User key={user.id} user={user} onClick={this.deleteUser} />; ?} ?render() { ???return ( ?????<div> ???????<h1>Users</h1> ???????<ul> ?????????{this.state.users.map(this.renderUser)} ???????</ul> ?????</div> ???); ?}}render(<App />, document.getElementById(‘root‘));上面的例子就没有箭头函数了。这里面使用了闭包的概念，把user传递下去了。
来源：https://segmentfault.com/a/1190000011007769
在react jsx中，为什么使用箭头函数和bind容易出现问题
原文地址：https://www.cnblogs.com/qixidi/p/10160748.html