資訊專(zhuān)欄INFORMATION COLUMN
摘要：在組件中，每個(gè)方法的上下文都會(huì)指向該組件的實(shí)例，即自動(dòng)綁定為當(dāng)前組件而且還會(huì)對(duì)這種引用進(jìn)行緩存，以達(dá)到和內(nèi)存的最大化。
在react組件中，每個(gè)方法的上下文都會(huì)指向該組件的實(shí)例，即自動(dòng)綁定this為當(dāng)前組件,而且react還會(huì)對(duì)這種引用進(jìn)行緩存，以達(dá)到cpu和內(nèi)存的最大化。在使用了es6 class或者純函數(shù)時(shí)，這種自動(dòng)綁定就不復(fù)存在了，我們需要手動(dòng)實(shí)現(xiàn)this的綁定
以下是幾種綁定的方法:
bind方法
直接綁定是bind（this）來(lái)綁定，但是這樣帶來(lái)的問(wèn)題是每一次渲染是都會(huì)重新綁定一次bind；
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
del(){
console.log("del")
}
render() {
return (
);
}
}
構(gòu)造函數(shù)內(nèi)綁定
在構(gòu)造函數(shù) constructor 內(nèi)綁定this，好處是僅需要綁定一次，避免每次渲染時(shí)都要重新綁定，函數(shù)在別處復(fù)用時(shí)也無(wú)需再次綁定
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
};
this.del=this.del.bind(this)
}
del(){
console.log("del")
}
render() {
return (
);
}
}
::不能傳參
如果不傳參數(shù)使用雙冒號(hào)也是可以
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
del(){
console.log("del")
}
render() {
return (
);
}
}
箭頭函數(shù)綁定
箭頭函數(shù)不僅是函數(shù)的"語(yǔ)法糖"，它還自動(dòng)綁定了定義此函數(shù)作用域的this，因?yàn)槲覀儾恍枰賹?duì)它們進(jìn)行bind方法：
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
del=()=>{
console.log("del")
}
render() {
return (
);
}
}
以上幾種方法都可以實(shí)現(xiàn)this綁定，使用那種各自的習(xí)慣；
希望大家喜歡，也希望大家指點(diǎn)錯(cuò)誤，也可以加入qq群439667347，大家一起討論，一起進(jìn)步，后續(xù)更新中...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/93260.html
摘要：原由寫(xiě)這篇文章主要是為了增強(qiáng)自己的記憶，同時(shí)也是為了分享一下我們常用的創(chuàng)建組建的方法，主要是四種，啟發(fā)來(lái)自于不知的博客呀，有興趣的人可以去看看他的博客敘述我們?cè)谟玫臅r(shí)候考慮最多的其實(shí)就是如何策劃組建的劃分，組建的嵌套，能夠做到更省時(shí)省力。 原由：寫(xiě)這篇文章主要是為了增強(qiáng)自己的記憶，同時(shí)也是為了分享一下我們常用的創(chuàng)建組建的方法，主要是四種(createClass, component, ...
摘要：方法一必須在這里綁定方法二使用屬性初始化器語(yǔ)法需要開(kāi)啟以上方法三在使用時(shí)綁定方法四在回調(diào)函數(shù)中使用箭頭函數(shù)渲染的時(shí)候都會(huì)創(chuàng)建一個(gè)不同的回調(diào)函數(shù)。然而如果這個(gè)回調(diào)函數(shù)作為一個(gè)屬性值傳入低階組件，這些組件可能會(huì)進(jìn)行額外的重新渲染。 從16年夏天初學(xué)React，到17年正式投入到工作中使用，直到現(xiàn)在V16.2發(fā)版，React發(fā)生了巨大的變化，最近在工作中使用時(shí)遇到很多基礎(chǔ)不是非常清晰，借此再...
摘要：詳解十大常用設(shè)計(jì)模式力薦深度好文深入理解大設(shè)計(jì)模式收集各種疑難雜癥的問(wèn)題集錦關(guān)于，工作和學(xué)習(xí)過(guò)程中遇到過(guò)許多問(wèn)題，也解答過(guò)許多別人的問(wèn)題。介紹了的內(nèi)存管理。 延遲加載 (Lazyload) 三種實(shí)現(xiàn)方式 延遲加載也稱(chēng)為惰性加載，即在長(zhǎng)網(wǎng)頁(yè)中延遲加載圖像。用戶(hù)滾動(dòng)到它們之前，視口外的圖像不會(huì)加載。本文詳細(xì)介紹了三種延遲加載的實(shí)現(xiàn)方式。 詳解 Javascript十大常用設(shè)計(jì)模式 力薦~ ...
摘要：綁定事件處理函數(shù)指向的四中方式以及他們的優(yōu)缺點(diǎn)。內(nèi)部自己實(shí)現(xiàn)了一套高效的事件機(jī)制，為了提高框架的性能，通過(guò)事件冒泡，只在節(jié)點(diǎn)上注冊(cè)原生的事件，內(nèi)部自己管理所有組件的事件處理函數(shù)，以及事件的冒泡捕獲。 前面的文章介紹了 React 的 JSX 語(yǔ)法、組件的創(chuàng)建方式、組件的屬性、組件的內(nèi)部狀態(tài)以及組件的生命周期。另外，還順帶說(shuō)了各個(gè)知識(shí)點(diǎn)要重點(diǎn)注意的事情，以及我在項(xiàng)目實(shí)踐中的一些經(jīng)驗(yàn)。如果...
摘要：選擇的主要原因大概是因?yàn)樵摽蚣艹霈F(xiàn)較早，感覺(jué)上會(huì)相對(duì)成熟，日后學(xué)習(xí)中遇到問(wèn)題想要查找答案相對(duì)簡(jiǎn)單一些，對(duì)，就是這么簡(jiǎn)單。多說(shuō)無(wú)益，接下來(lái)開(kāi)始的學(xué)習(xí)，我按照我學(xué)習(xí)中帶著的問(wèn)題來(lái)一一解答，完成我的入門(mén)筆記。主要是針對(duì)前端的組件化開(kāi)發(fā)。 這兩天得空，特意來(lái)折騰了以下時(shí)下火熱的前端框架react，至于為什么選react,作為一個(gè)初學(xué)者react和vue在技術(shù)上的優(yōu)劣我無(wú)權(quán)評(píng)論，也就不妄加評(píng)論了...
閱讀 7248·2021-09-22 15:36
閱讀 6051·2021-09-02 10:20
閱讀 1936·2019-08-30 15:44
閱讀 2724·2019-08-29 14:06
閱讀 1218·2019-08-29 11:17
閱讀 1673·2019-08-26 14:05
閱讀 3235·2019-08-26 13:50
閱讀 1618·2019-08-26 10:26
