React绑定onClick为什么要用箭头函数?

https://segmentfault.com/q/1010000010918131

如何优雅地在React中处理事件响应

https://segmentfault.com/a/1190000010308456

一:

事件处理函数使用es6写法:

在使用ES6 classes或者纯函数时,React不会自动绑定this到当前组件上,需要手动实现this的绑定。

handleClick = (i) => {
console.log(i)
}

<p onClick={this.handleClick.bind(this,123)}>iiiii</p>

二:

onClick内部使用箭头函数

箭头函数可以自动绑定定义此函数作用的this,因此不需要bind

testhhandleClick(){
console.log('testhhandleClick')
}

<p onClick={()=>{this.testhhandleClick()}}>testhhandleClick</p>

如何优雅地在React中处理事件响应&&React绑定onClick为什么要用箭头函数?的更多相关文章

  1. React中的响应式设计思想和事件绑定

    这两个点是react入门非常重要的两个点,以前我们是直接操作dom的形式去做,react的设计思想和以前直接操作dom是完全不同的,react是一个响应式的框架,他在做编程的时候,强调的是我们不要直接 ...

  2. 如何正确地在React中处理事件

    1.构造器内绑定this class MyComponent extends React.Component { constructor(props) { super(props); this.sta ...

  3. React中方法的this绑定

    第一种 在组件(类)的constructor中绑定this class Demo extends Component { constructor(this) { super(this) this.st ...

  4. 在React中使用Redux

    这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  5. [ES6]react中使用es6语法

    前言 不论是React还是React-native,facebook官方都推荐使用ES6的语法,没在项目中使用过的话,突然转换过来会遇到一些问题,如果还没有时间系统的学习下ES6那么注意一些常见的写法 ...

  6. DIFF算法浅析(三)在react中的实现

    在虚拟dom中diff的实现. 分别从4个方面: DIFF抽象概念(概述.时间复杂性分析) 在Vue2中的实现(版本2.6.11.必要性.执行方式) 在React中的实现(版本16.13.1,必要性. ...

  7. React中diff算法的理解

    React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...

  8. React:JS中的this和箭头函数

    JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中 ...

  9. JavaScript深入浅出第1课:箭头函数中的this究竟是什么鬼?

    <JavaScript 深入浅出>系列: JavaScript 深入浅出第 1 课:箭头函数中的 this 究竟是什么鬼? JavaScript 深入浅出第 2 课:函数是一等公民是什么意 ...

随机推荐

  1. xblock架构,链接与加载

    首先,xblock是一个模块,edx即edx-platform,在github.com/edx/edx-platform中,此平台有一个专门加载xblock的模块,定义了所有的接口,可以逐一将模块中的 ...

  2. GSL--GNU Scientific Library 小记

    摘自http://qianjigui.iteye.com/blog/847612 GSL(GNU Scientific Library)是一个 C 写成的用于科学计算的库,下面是一些相关的包 Desi ...

  3. find命令查找目录

    find <path> -type d -name "dir_name" -type d是查找目录的参数,如果是查找其他的: -type b: Block specia ...

  4. I/O性能优化

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11525014.html Linux 系统的 I/O 栈图 I/O性能指标 根据指标找工具 根据工具查指 ...

  5. UML-六大关系

    六大关系 依赖关系:(只要是在类中使用到了对方就存在依赖关系) 泛化关系:就是继承关系,即依赖关系的特例 实现关系:依赖关系的特例 关联关系:类于类之间的关系,即依赖关系的特例(具有导航性:双向关系或 ...

  6. MySQL/RDS数据如何同步到MaxCompute之实践讲解

    摘要:大数据计算服务(MaxCompute,原名ODPS)是阿里云提供的一种快速.完全托管的EB级数据仓库解决方案.本文章中阿里云MaxCompute公有云技术支持人员刘力夺通过一个实验向大家介绍了阿 ...

  7. 【Vim编辑器】基本命令

    前言 工作中免不了会使用到vim编辑文档,总会觉得不好上手,遂从网上找到一篇说明文档整理如下,共勉. 原文地址: https://www.cnblogs.com/shiyanlou/archive/2 ...

  8. springmvc 的 @PathVariable

    @PathVariable映射 URL 绑定的占位符 通过 @PathVariable 可以将 URL 中占位符参数绑定到控 •制器处理方法的入参中:URL 中的 {xxx} 占位符可以通过@Path ...

  9. vue之条件语句小结

    vue之条件语句小结 v-if, v-else 随机生成一个数字,判断是否大于0.5,然后输出对应信息: <!DOCTYPE html> <html> <head> ...

  10. 在CentOS上部署kubernetes1.9.0集群

    原文链接: https://jimmysong.io/kubernetes-handbook/cloud-native/play-with-kubernetes.html (在CentOS上部署kub ...