在之前的文章中,已经说明如何避免在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结果。我已经定义UserPureComponent。所以只有当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容易出现问题的更多相关文章

  1. 在react jsx中使用if判断

    在react jsx中如果使用if判断,需要这样做 var loginButton; if (loggedIn) { loginButton = <LogoutButton />; } e ...

  2. js中this,箭头函数和普通函数

    四种基本用法 1. 一般方法中,this代指全局对象 window 2. 作为对象方法调用,this代指当前对象 3. 作为构造函数调用,this 指代new 出的对象 function test() ...

  3. JS中generater和箭头函数

    generater跟函数很像: function* fn(x){ yield x; yield x++; return x;} 如上所示,generater用function*定义,可以用yield返 ...

  4. JS 函数(arguments、箭头函数、bind)

    参数 函数内部可用的 arguments 对象来访问函数的实参 注意 在函数递归调用的时候(在某一刻同一个函数运行了多次,也就是有多套实参),那么 arguments 属性的值是最近一次该函数调用时传 ...

  5. es6中的双箭头函数

    原代码: const fetchPosts = subreddit => dispatch => { dispatch(requestPosts(subreddit)); return c ...

  6. react jsx 中使用 switch case 示例

    <div> <span>适用平台:</span> <span>{(() => { switch (currentItems.usePlatform ...

  7. 普通函数跟箭头函数中this的指向问题

    箭头函数和普通函数的区别如下. 普通函数:根据调用我的人(谁调用我,我的this就指向谁) 箭头函数:根据所在的环境(我再哪个环境中,this就指向谁) 一针见血式总结: 普通函数中的this: 1. ...

  8. => js 中箭头函数使用总结

    箭头函数感性认识 箭头函数 是在es6 中添加的一种规范 x => x * x 相当于 function(x){return x*x} 箭头函数相当于 匿名函数, 简化了函数的定义. 语言的发展 ...

  9. ES6中箭头函数的作用

    我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数.类似于下面的写法: let test1=() => “abc”; let test2=() => { return “a ...

随机推荐

  1. 洛谷——P1988 火炬

    P1988 火炬 题目描述 2008北京奥运会,你想成为四川汶川的一名火炬手,经过层层选拔,终于到了最后一关,这一关是一道很难的题:任意给定一个正整数N(N<=100000),求一个最小的正整数 ...

  2. Codeforces Round #321 (Div. 2) Kefa and Park 深搜

    原题链接: 题意: 给你一棵有根树,某些节点的权值是1,其他的是0,问你从根到叶子节点的权值和不超过m的路径有多少条. 题解: 直接dfs一下就好了. 代码: #include<iostream ...

  3. OSI-ISO 七层协议通信模型

  4. 327. Count of Range Sum

    /* * 327. Count of Range Sum * 2016-7-8 by Mingyang */ public int countRangeSum(int[] nums, int lowe ...

  5. Java定义接口变量为接收类型有什么好处(面向接口编程)

    个人理解:定义接口变量为接收类型属于面向接口的编程,通过接口的抽象能减少类之间的耦合,增加可复用性. 面向接口编程: 一种规范约束 制定者(或者叫协调者),实现者(或者叫生产者),调用者(或者叫消费者 ...

  6. SQL-基础学习1--SELECT,LIMIT,DISTINCT,注释

    所使用的数据库资料在:数据库资料 1.1 基础概念 1.数据库(database) 保存有组织的数据的容器(通常是一个文件或一组文件) 注意:常用的mysql,等是数据库管理系统DBMS:由这些软件创 ...

  7. DEDECMS5.5怎样调用{dede:field.content/}做简介之类的单独页面?

    很多时候,如果用dede来做一些企业公司网站,或者一些部门网站的时候.需要某些栏目是一个单页的文章,用于公司简介或者企业文化之类的.那么就要用到栏目功能的栏目内容,也就是dede的content标签. ...

  8. VirtualApp技术黑产利用研究报告

    一. 前言 VirtualApp(以下称VA)是一个App虚拟化引擎(简称VA).VirtualApp创建了一个虚拟空间,你可以在虚拟空间内任意的安装.启动和卸载APK,这一切都与外部隔离,如同一个沙 ...

  9. [反汇编练习] 160个CrackMe之036

    [反汇编练习] 160个CrackMe之036. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  10. OpenCV学习教程入门篇&lt;一、介绍&gt;

    OpenCV,是Inter公司开发的免费开源专门因为图像处理和机器视觉的C/C++库,英文全称是Open Source Computer Vision. 1. 可视化语言Matlab与OpenCV都能 ...