React与ES6(三)ES6类和方法绑定
React与ES6系列:
- React与ES6(一)开篇介绍
- React和ES6(二)ES6的类和ES7的property initializer
- React与ES6(三)ES6类和方法绑定
- React与ES6(四)ES6如何处理React mixins
如果你看到前篇里CartItem
的render
方法里的这一句:{this.increaseQty.bind(this)}
你可能会很意外为什么要bind
。
如果把bind
删掉的话会怎么样呢?会报错Uncaught TypeError: Cannot read property 'setState' of undeined。
这是因为this.increaseQty
的this
指向的不是类,而是undefined
。ES6的类不支持自动绑定,不能像ES5那样。比如React.createClass()
这样全部的内部方法都是自动绑定好了。
下面我们就看看ES6写的React组件类如何绑定内部方法。
方法一、使用Function.prototype.bind()
class CartItem extends React.Component {
render() {
return (
<p className="large-4 column">
<button onClick={this.increaseQty.bind(this)} className="button success">+</button>
<button onClick={this.decreaseQty.bind(this)} className="button alert">-</button>
</p>
);
}
}
ES6的类本质就是Javascript方法,从Function的prototype里继承了bind()
方法。所以当我们调用increaseQty()
方法的时候,this
指向了类的实例。你可以在MDN文档里看到更多。
方法二、使用在constructor里定义的方法
这是方法一和constructor的混合使用:
export default class CartItem extends React.Component {
constructor(props) {
super(props);
this.increaseQty = this.increaseQty.bind(this);
}
render() {
<button onClick={this.increaseQty} className="button success">+</button>
}
}
这个方法就是把bind()
方法从JSX定义里换到了类的constructor
里。
方法三、使用箭头方法和构造函数
ES6的胖箭头方法被调用的时候保留了this
指向的上下文。我们可以使用这一特性在构造函数里重新定义increaseQty()
方法。
export default class CartItem extends React.Component {
constructor(props) {
super(props);
// this.state = {
// qty: props.initialQty,
// total: 0
// };
this._increaseQty = () => this.increaseQty();
}
render() {
<button onClick={_this.increaseQty} className="button success">+</button>
}
}
方法四、使用胖箭头方法和ES2015的class property
export default class CartItem extends React.Component {
increaseQty = () => this.increaseQty();
render() {
<button onClick={this.increaseQty} className="button success">+</button>
}
因此,类属性非常的简洁。
注意:类属性不是当前Javascript的标准,但是Babel已经支持这个功能(stage 0)。你可以看这里了解更多。
方法五、使用ES2015的方法绑定语法
Babel又加入了对一个语法糖的支持Function.prototype.bind()
:::
。这里就不介绍这个操作符是怎么工作的了。
export default class CartItem extends React.Component {
constructor(props) {
super(props);
this.increaseQty = ::this.increaseQty;
}
render() {
<button onClick={this.increaseQty} className="button success">+</button>
}
}
最后
老外介绍的几个方法有点地方差别都不大,有的甚至只是调用的地方从constructor换到了JSX里。所以,有些就略去了,其他的可以看看。
React与ES6(三)ES6类和方法绑定的更多相关文章
- DirectSound学习(三)--类、方法、属性翻译
DirectSound.Device :Contains methods and properties used to create buffer objects, manage devices, a ...
- ES6中。类与继承的方法,以及与ES5中的方法的对比
// 在ES5中,通常使用构造函数方法去实现类与继承 // 创建父类 function Father(name, age){ this.name = name; this.age = age; } F ...
- React Native 的ES5 ES6写法对照表
模块 引用 在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样: //ES5 var React = require("react" ...
- React/React Native 的ES5 ES6写法对照表
//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...
- React/React Native 的ES5 ES6写法对照表-b
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
- ES6中数组的新方法
数组的扩展 1.1扩展运算符 1.1.1:... 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. <body> < ...
- 【转】React Native中ES5 ES6写法对照
很多React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是 ...
- React Native之ES5/ES6语法差异对照表
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
- Web 开发的未来:React、Falcor 和 ES6
Web 开发的未来:React.Falcor 和 ES6 Widen是一家数字资产管理解决方案提供商.目前,其技术栈还非常传统,包括服务器端的Java.浏览器端的AngularJS.提供REST AP ...
随机推荐
- Js_Ajax_输入词提示
输入"1",有提示,否则没有 suggest.jsp #suggest { background-color: #e0e0e0; width: 200px; } var xhr; ...
- Ping 命令的使用方法总结
一.Ping 命令 “Ping”命令是我们在判断网络故障常用的命令,但您真正明白这个命令运行后会发生什么,以及出现的各种信息说明了什么吗?其实熟练的掌握 Ping 命令的各种技巧可以帮助你解决很多网络 ...
- React 附件动画API ReactCSSTransitionGroup
React为动画提供了一个附加组件ReactTransitionGroup,这个附加组件是动画的底层API,并且还提供了一个附件组件ReactCSSTransitionGroup,ReactCSSTr ...
- [js]识别浏览器及版本
var userAgent = navigator.userAgent.toLowerCase();window.jQuery.browser = { version: (userAgent.m ...
- WampServer服务中MySQL无法正常启动解决方案
打开wampserver->mysql->my.ini,添加或修改innodb_force_recovery = 1 然后重启所有服务就大功告成了!
- CSS3基础01
一.选择器: 分为关系选择器 ,属性选择器 ,伪类选择器 1.1关系选择器 后代选择器 ul li 选择所有的后代元素 子代选择器 ul > li 选择ul的儿子 紧邻选择器 .b ...
- —linux 磁盘配额按用户管理(quota)
我根据下面的ref链接整理的基本是的按用户额度管理步骤 (按组的额度管理被简化掉) 我在Ubuntu服务器12.04下整理,其他版本的Ubuntu和Linux应该都没有问题的 (有任何错误都指正给我, ...
- {Reship}{ListView}C# ListView用法详解
======================================================================== This aritcle came from http ...
- 搭建java,oracle,plsql开发环境
一:安装jdk和jre; (1)有两种方法:1,从官网网址上安装:2,安装绿色版 (2)配置环境变量 在"系统变量"下进行如下配置: (1)新建->变量名:JAVA_HOME ...
- LApacheMP基础环境搭建
一.安装前准备 1.下载所需软件包: apr | http://apache.etoak.com/apr/ apr-util | http://apache.etoak.com/apr/ autoco ...