資訊專欄INFORMATION COLUMN
摘要：幸運(yùn)的是，已經(jīng)提供了對(duì)這個(gè)新語法的支持。而且函數(shù)綁定語法屬于草案中的特性，尚未納入標(biāo)準(zhǔn)。方案和方案會(huì)增加代碼量方案需要引入第三方庫，不過提供了很多使用的裝飾器。常用的方案是方案和方案刪除箭頭函數(shù)刪除
問題
對(duì)于大多數(shù)前端開發(fā)來說，JavaScript 的 this 關(guān)鍵字會(huì)造成諸多困擾，由于 JavaScript 代碼中的 this 指向并不清晰。在寫react應(yīng)用時(shí)，也會(huì)也到很多作用域綁定引起的問題，React組件ES6的寫法，不會(huì)將方法內(nèi)部的作用域自動(dòng)綁定到組件的實(shí)例上。
下面展示一段問題代碼
class Search extends Component {
static propTypes = {
onSearch: React.PropTypes.func.isRequired
}
onSearch() {
console.log("表單值：", this.field.getValues());
this.props.onSearch(this.field.getValues());
}
render(){
const {init} = this.field;
return
}
}
如果你真的嘗試這么做了, 你會(huì)發(fā)現(xiàn)在onSearch中，因?yàn)閠his指向的是全局對(duì)象window而報(bào)錯(cuò)。
解決辦法我們都知道常規(guī)改變函數(shù)作用域的無非3種（Fiontion.prototype.bind call apply 三兄弟）,下面講解一下在es6中bind作用域的幾種方式。
使用Function.prototype.bind()
class Search extends Component {
render(){
return
}
}
ES7函數(shù)綁定語法
在 ES7 中，有一個(gè)關(guān)于 bind 語法 的提議，提議將 :: 作為一個(gè)新的綁定操作符, 而且已經(jīng)收錄在stage-0提案中，實(shí)際上::是Function.propotype.bind()的一種語法糖。 幸運(yùn)的是，Babel已經(jīng)提供了對(duì)這個(gè)新語法的支持。
class Search extends Component {
render(){
return
}
}
在構(gòu)造函數(shù)中bind this
class Search extends Component {
constructor(props) {
super(props);
this.onSearch = this.onSearch.bind(this)
}
render(){
return
}
}
使用箭頭函數(shù)
class Search extends Component {
render(){
return
}
}
core-decorators.js
core-decorators.js為開發(fā)者提供了一些實(shí)用的 decorator，其中實(shí)現(xiàn)的autobind修飾器能使得方法中的this對(duì)象綁定到原始對(duì)象
class Search extends Component {
@autobind
onSearch() {
console.log("表單值：", this.field.getValues());
this.props.onSearch(this.field.getValues());
}
render(){
const {init} = this.field;
return
}
}
總結(jié)
這里我們討論下以上幾種將this綁定到react組件方案的缺點(diǎn)，優(yōu)點(diǎn)自己體會(huì)吧。
方案1和方案2，缺點(diǎn)也很嚴(yán)重，這種方式破壞了組件的pure render，每次組件render時(shí)，子組件Button的onClick值都是重新賦值所得，會(huì)導(dǎo)致Button做一次無謂的render。而且函數(shù)綁定語法::屬于es7草案中的特性，尚未納入es標(biāo)準(zhǔn)。使用需要謹(jǐn)慎。
方案3和方案4會(huì)增加代碼量
方案5需要引入第三方庫，不過core-decorators.js提供了很多使用的裝飾器。
某些場(chǎng)景下，我們需要傳遞額外的參數(shù)，比如列表中刪除操作，需要傳id。常用的方案是方案1和方案4
// Function.prototype.bind()- 刪除
// 箭頭函數(shù)- { this.doDelete(id, ...args) }}>刪除
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/87979.html
摘要：異步渲染利用事件循環(huán)，延遲渲染函數(shù)的調(diào)用調(diào)用回調(diào)函數(shù)處理后跟函數(shù)的情況淺合并邏輯事件循環(huán)，關(guān)于的事件循環(huán)和的事件循環(huán)后續(xù)會(huì)單獨(dú)寫篇文章。 showImg(https://segmentfault.com/img/remote/1460000015785464?w=640&h=280); 看源碼一個(gè)痛處是會(huì)陷進(jìn)理不順主干的困局中，本系列文章在實(shí)現(xiàn)一個(gè) (x)react 的同時(shí)理順 Rea...
摘要：使用箭頭函數(shù)和構(gòu)造函數(shù)當(dāng)方法被調(diào)用時(shí)，會(huì)保留上下文。我們能使用這個(gè)特征用下面的方法在構(gòu)造函數(shù)中重定義函數(shù)。在調(diào)用方法的方使用函數(shù)綁定語法你也可以直接在非構(gòu)造函數(shù)里面的里面直接使用函數(shù)綁定。 這是React和ECMAScript6／ECMAScript7結(jié)合使用系列文章的第三篇。 下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始...
摘要：使用匿名函數(shù)先上代碼代碼點(diǎn)擊的事件響應(yīng)函數(shù)是一個(gè)匿名函數(shù)，這應(yīng)該是最常見的處理事件響應(yīng)的方式了。事件響應(yīng)函數(shù)的傳參問題事件響應(yīng)函數(shù)默認(rèn)是會(huì)被傳入一個(gè)事件對(duì)象作為參數(shù)的。關(guān)于事件響應(yīng)函數(shù)，還有一個(gè)地方需要注意。 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對(duì)React的理解，以及在項(xiàng)目中更加靈活地使用React。 Web應(yīng)用中，事件處理是重要的一...
摘要：本篇是深入系列的最后一篇，將介紹開發(fā)應(yīng)用時(shí)，經(jīng)常用到的模式，這些模式并非都有官方名稱，所以有些模式的命名并不一定準(zhǔn)確，請(qǐng)讀者主要關(guān)注模式的內(nèi)容。 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對(duì)React的理解，以及在項(xiàng)目中更加靈活地使用React。 本篇是React深入系列的最后一篇，將介紹開發(fā)React應(yīng)用時(shí)，經(jīng)常用到的模式，這些模式并非都有...
摘要：在不需要手動(dòng)調(diào)用瀏覽器原生的進(jìn)行事件監(jiān)聽。沒有經(jīng)過特殊處理的話，這些的事件監(jiān)聽只能用在普通的的標(biāo)簽上，而不能用在組件標(biāo)簽上。的事件監(jiān)聽方法需要手動(dòng)到當(dāng)前實(shí)例，這種模式在中非常常用。下一節(jié)中我們將介紹小書組件的和。 React.js 小書 Lesson9 - 事件監(jiān)聽 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson9 轉(zhuǎn)載請(qǐng)...
閱讀 2201·2023-04-25 16:19
閱讀 3244·2021-11-24 09:39
閱讀 901·2021-11-16 11:44
閱讀 1744·2019-08-29 12:52
閱讀 1191·2019-08-26 13:33
閱讀 1133·2019-08-26 10:26
閱讀 2261·2019-08-23 16:42
閱讀 2656·2019-08-23 14:37
