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