爲什麼在擴展React.Component內部有不同的方法語法？

我注意到在class ExampleComponent extends React.Component {...}裏有不同的方法定義方法，前者是作爲React的一部分的方法的聲明，後者是你自己的方法的表達式。爲什麼是這樣？爲什麼他們都不是相同的格式？爲什麼在擴展React.Component內部有不同的方法語法？

componentDidMount() { 
    ... 
    }

與

myMethod =() => { 
    ... 
    }

來源

2017-06-20 stackjlei

因爲......他們都做同樣的事情？一個恰好是一個箭頭函數。它可能需要也可能不需要，這取決於它如何被調用。 –

@KevinB不，他們不一樣？ – Bergi

一個是有效的ES6方法定義，另一個不是。 [這是一個實驗語法]（https://stackoverflow.com/questions/31362292/how-to-use-arrow-functions-public-class-fields-as-class-methods），並應該更好地進入構造函數。 – Bergi

-1

當你有

componentDidMount() { 
    ... 
    }

它是一個生命週期函數和this內會自動默認綁定到陣營組件上下文。

但是當你定義你自己的函數時，它裏面的this會引用函數本身的內容。但是，如果您使用arrow function像

myMethod =() => { 
    ... 
    }

this關鍵字定義它裏面將指在這種情況下是陣營組件上下文的父上下文。

檢查這篇文章Arrow function

來源

2017-06-20 20:45:13

「默認自動綁定到React組件上下文」是什麼意思？ *「這裏面是指函數本身的內容。」*函數的「內容」是什麼？ '這'當然不是指那個。 –

@FelixKling，我想你有足夠的經驗去理解，'內容'是一個錯字。 –

這一個去原型

fnProto() { 

}

這一個是實驗性的，直接變爲有this實例始終指的實例。

fnInstance =() => {}

翻譯成ES5

class Cmp { 
fnProto() { 
    console.log('goes to proto') 
} 

    fnInstance =() => { 
    console.log('goes to instance') 
    } 
}

將大致相當於

function Cmp() { 
    this.fnInstance = (function() { 
     console.log('goes to instance') 
    }).bind(this) 
} 

Cmp.prototype.fnProto = function() { 
    console.log('goes to proto') 
}

來源

2017-06-20 20:46:05

爲什麼在擴展React.Component內部有不同的方法語法？

回答

相關問題