React与ES6(三)ES6类和方法绑定
来源:互联网 发布:淘宝客提现时间 编辑:程序博客网 时间:2024/06/14 21:55
React与ES6系列:
1. React与ES6(一)开篇介绍
2. React和ES6(二)ES6的类和ES7的property initializer
3. React与ES6(三)ES6类和方法绑定
4. 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类和方法绑定
- React与ES6(四)ES6如何处理React mixins
- React:ES6:ES7中的6种this绑定方法
- React和ES6(二)ES6的类和ES7的property initializer
- React与ES6(一)开篇介绍
- react与es6的结合
- React+ES6
- React中ES6事件绑定相关事项
- React: ES5 和 ES6 比较
- ES6和React知识思想
- React Native 的 ES6 类写法与未定义错误
- react的ES5与ES6写法的不同(一)
- 【React Native】JavaScript与ES6基础(一)
- React(7.2)--React ES6 处理 mixin
- React的ES5与ES6写法对比
- React ES5与ES6语法写法比较
- React ES6与ES5写法的区别
- 使用 Webpack 和 ES6 进行 React 开发
- android中的Package替换流程
- OC-UICollectionViewController& UITabBarController
- 基础知识之PDO
- React实战-如何快速构建一个ReactNative的Demo
- Python程序员学习路线图
- React与ES6(三)ES6类和方法绑定
- js 随机产生一注 三注 五注 双色球
- 排序算法之五--冒泡排序及其改进
- [读书笔记] 深入探索C++对象模型-第五章-构造、析构、拷贝语义学(上)
- 1.10预处理器初探
- [LeetCode-Java]7. Reverse Integer
- Android常用正则工具类
- 小白分享CSS权重的规则计算
- 创建和销毁对象(2)——遇到多个构造器参数是要考虑用构建器