React:ES6:ES7中的6种this绑定方法
<iframe id="BAIDU_DUP_fp_iframe" src="//pos.baidu.com/wh/o.htm?ltr=" style="width: 0px; height: 0px; visibility: hidden; display: none;"></iframe>
React:ES6:ES7中的6种this绑定方法
转载至:http://www.open-open.com/lib/view/open1459320493676.html
对于大多数开发者来说,JavaScript 的 this 关键字会造成诸多困扰。由于 JavaScript 不具备如 Java 等语言的严格类模型,因而除非是在处理回调,否则代码中的 一般来说,对于部分运行中的代码(非回调)会通过 问题在每个 this.setState({ loading: true });
fetch('/').then(function loaded() {
this.setState({ loading: false });
});
上述代码会造成 那么,怎么正确绑定代码中的 选择本文提供的 6 种方式中,有一些是比较老的技术,另一些是针对 React 的,还有一些可能浏览器也不支持,但还是值得探讨一下。 1、this 别名 这种方式就是在 React 组件的作用域顶端创建一个指向 var component = this;
component.setState({ loading: true });
fetch('/').then(function loaded() {
component.setState({ loading: false });
});
这种方式方便,易于理解,并能保证 2、 这种方式是在函数运行时将 this.setState({ loading: true });
fetch('/').then(function loaded() {
this.setState({ loading: false });
}.bind(this));
在 JavaScript 中,所有函数都有 bind 方法,其允许你为 3、React Component Methods 当使用 React.createClass({
componentWillMount: function() {
this.setState({ loading: true });
fetch('/').then(this.loaded);
},loaded: function loaded() {
this.setState({ loading: false });
}
});
对于不是非常复杂的组件来说,这是一种非常不错的解决
但对于 ES2015 的类 来说,自动绑定并不适用。 4、箭头函数 ES2015 规范引入了箭头函数,使函数的定义更加简洁。箭头函数会隐式返回一个值,但更重要的是,它是在一个封闭的作用域中使用 this.setState({ loading: true });
fetch('/').then(() => {
this.setState({ loading: false });
});
不管嵌套多少层,箭头函数中的 如果你用 Babel 将 ES6 的代码转换成 ES5 的代码,就会发现两个有趣的现象:
const loaded = () => {
this.setState({ loading: false });
};
// will be compiled to
var _this = this;
var loaded = function loaded() {
_this.setState({ loading: false });
};
5、ES7 的绑定语法 在 ES7 中,有一个关于 bind 语法 的提议,提议将 以 function map(f) {
var mapped = new Array(this.length);
for(var i = 0; i < this.length; i++) {
mapped[i] = f(this[i],i);
}
return mapped;
}
与 lodash 不同,我们不需要传递数据给 [1,2,3]::map(x => x * 2)
// [2,4,6]
对下面的代码熟悉吗? [].map.call(someNodeList,myFn);
// or
Array.from(someNodeList).map(myFn);
ES7 的绑定语法允许你像使用箭头函数一样使用 someNodeList::map(myFn); 在 React 中也是可以使用的: this.setState({ loading: true });
fetch('/').then(this::() => {
this.setState({ loading: false });
});
6、方法传参指定 一些函数允许为 items.map(function(x) {
return <a onClick={this.clicked}>x</a>;
},this);
虽然代码能运行,但这不是函数的一致实现。大部分函数并不接受
来源 http://www.ido321.com/1670.html (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |