在react jsx中,为什么使用箭头函数和bind容易出现问题
在之前的文章中,已经说明如何避免在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.js
import 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容易出现问题的更多相关文章
- 在react jsx中使用if判断
在react jsx中如果使用if判断,需要这样做 var loginButton; if (loggedIn) { loginButton = <LogoutButton />; } e ...
- js中this,箭头函数和普通函数
四种基本用法 1. 一般方法中,this代指全局对象 window 2. 作为对象方法调用,this代指当前对象 3. 作为构造函数调用,this 指代new 出的对象 function test() ...
- JS中generater和箭头函数
generater跟函数很像: function* fn(x){ yield x; yield x++; return x;} 如上所示,generater用function*定义,可以用yield返 ...
- JS 函数(arguments、箭头函数、bind)
参数 函数内部可用的 arguments 对象来访问函数的实参 注意 在函数递归调用的时候(在某一刻同一个函数运行了多次,也就是有多套实参),那么 arguments 属性的值是最近一次该函数调用时传 ...
- es6中的双箭头函数
原代码: const fetchPosts = subreddit => dispatch => { dispatch(requestPosts(subreddit)); return c ...
- react jsx 中使用 switch case 示例
<div> <span>适用平台:</span> <span>{(() => { switch (currentItems.usePlatform ...
- 普通函数跟箭头函数中this的指向问题
箭头函数和普通函数的区别如下. 普通函数:根据调用我的人(谁调用我,我的this就指向谁) 箭头函数:根据所在的环境(我再哪个环境中,this就指向谁) 一针见血式总结: 普通函数中的this: 1. ...
- => js 中箭头函数使用总结
箭头函数感性认识 箭头函数 是在es6 中添加的一种规范 x => x * x 相当于 function(x){return x*x} 箭头函数相当于 匿名函数, 简化了函数的定义. 语言的发展 ...
- ES6中箭头函数的作用
我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数.类似于下面的写法: let test1=() => “abc”; let test2=() => { return “a ...
随机推荐
- JS快速上手-基础Javascript
1.1背景 1.1.1 ECMAScript与javascript ECMAScript是javascript的官方命名.因为java已经是一个商标.如今,一些早前收到过授权的公司,如Moailla, ...
- ABP开发框架前后端开发系列---(2)框架的初步介绍
在前面随笔<ABP开发框架前后端开发系列---(1)框架的总体介绍>大概介绍了这个ABP框架的主要特点,以及介绍了我对这框架的Web API应用优先的一些看法,本篇继续探讨ABP框架的初步 ...
- Windows下Python的虚拟环境
前言 在开发python的应用程序的时候,有时候会遇到依赖包的版本问题,比如之前开发tensorflow应用的时候需要用到python3.5以下的版本(还是python3),但是日常做其它应用的时候用 ...
- HttpClient的Post请求数据
最近在项目中需要添加Post请求数据,以前的Get请求是使用JDK自带的URLConnection.在项目组人员的推荐下,开始使用HttpClient. HttpClient简介: HttpClien ...
- Extjs grid 单元格事件
celldblclick: function (view, td, cellIndex, record, tr, rowIndex, e, eOpts) { //extjs 4.2下,有时出现,多次不 ...
- InnoDB: Warning: a long semaphore wait 解决办法
http://blog.csdn.net/wulantian/article/details/37560849
- TensorFlow 之 高层封装slim,tflearn,keras
tensorflow资源整合 使用原生态TensorFlow API来实现各种不同的神经网络结构.虽然原生态的TensorFlow API可以很灵活的支持不同的神经网络结构,但是其代码相对比较冗长,写 ...
- iOS 推送 获取手机设备的 deviceToken
第一步:申请证书: 第二步:申请app ids,应用名字必须一致.然后再进入进行编辑.使其enable,绿灯. 第三步:申请provisioning profile,生成.mobileprovisio ...
- Git 常用场景操作
git init 在本地新建一个repo,进入一个项目目录,执行git init,会初始化一个repo,并在当前文件夹下创建一个.git文件夹. git clone 获取一个u ...
- vue2.0 + vux (四)Home页
1.综合页(首页) Home.vue <!-- 首页 --> <template> <div> <!-- 顶部 标题栏 --> <app-head ...