資訊專欄INFORMATION COLUMN
摘要：會(huì)自行設(shè)置在組件的其他地方以供訪問。將傳入的作用是可以使你在內(nèi)訪問它完善后如果你只是想在別處訪問它，是不必傳入的，因?yàn)闀?huì)自動(dòng)為你設(shè)置好
原博文地址: http://cheng.logdown.com/posts/2016/03/26/683329
當(dāng)我們像下面這樣使用React的ES6 class語(yǔ)法創(chuàng)建一個(gè)組件的時(shí)候：
class MyClass extends React.component {
constructor(){
super()
}
}
不禁會(huì)提出兩個(gè)問題：
在constructor里面調(diào)用super是否是必要的？
super與super(props)的區(qū)別？
解答一：僅當(dāng)存在constructor的時(shí)候必須調(diào)用super，如果沒有，則不用
如果在你聲明的組件中存在constructor，則必須要加super，舉個(gè)栗子：
class MyClass extends React.component {
render(){
return Hello { this.props.world };
}
}
這段代碼完美無(wú)誤，你不需要為之去調(diào)用super，然而，如果在你的代碼中存在consturctor，那你必須調(diào)用：
class MyClass extends React.component {
constructor(){
console.log(this) //Error: "this" is not allowed before super()
}
}
之所以會(huì)報(bào)錯(cuò)，是因?yàn)槿舨粓?zhí)行super，則this無(wú)法初始化。
你也許會(huì)抱著僥幸心理猜測(cè)：那我直接寫個(gè)空的constructor就得了唄~，然而，在ES6中的class語(yǔ)法中，只要你的class是子類，那必須得調(diào)用super，換句話說，有constructor就得有super（當(dāng)然，子類也可以沒有constructor）
解答二僅當(dāng)你想在constructor內(nèi)使用props才將props傳入super。React會(huì)自行props設(shè)置在組件的其他地方（以供訪問）。
將props傳入super的作用是可以使你在constructor內(nèi)訪問它：
class MyClass extends React.component{
constructor(props){
super();
console.log(this.props); // this.props is undefined
}
}
完善后：
class MyClass extends React.component{
constructor(props){
super(props);
console.log(this.props); // prints out whatever is inside props
}
}
如果你只是想在別處訪問它，是不必傳入props的，因?yàn)?b>React會(huì)自動(dòng)為你設(shè)置好：
class MyClass extends React.component{
render(){
// There is no need to call `super(props)` or even having a constructor
// this.props is automatically set for you by React
// not just in render but another where else other than the constructor
console.log(this.props); // it works!
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81269.html
摘要：當(dāng)我們?cè)趯憰r(shí)候會(huì)用到中的語(yǔ)法比較常見的情況如下這里有兩個(gè)問題是否有必要在中調(diào)用函數(shù)調(diào)用和有何區(qū)別解答只有當(dāng)你有一個(gè)時(shí)候調(diào)用才是必須的看代碼上述代碼完全符合規(guī)定所以你其實(shí)并沒有必要去為你創(chuàng)建的每個(gè)調(diào)用話分兩頭如果你的代碼中有你就必須調(diào)用出現(xiàn)上 當(dāng)我們?cè)趯慠eact時(shí)候 會(huì)用到ES6中的class語(yǔ)法 ,比較常見的情況如下： class MyClass extends React.Comp...
摘要：如果是在中，我們也許只能這樣做但是，在中，我們不僅可以在對(duì)象字面量屬性的定義中使用表達(dá)式，還有使用使用字符串模板析構(gòu)擴(kuò)展運(yùn)算符我們?cè)诰帉懡M件的過程中，經(jīng)常遇到要從父組件要把自己的很多屬性多傳給子組件的情況。 原文地址： http://babeljs.io/blog/2015/06/07/react-on-es6-plus/ showImg(http://7xiyp1.com1.z0.g...
摘要：好的方案在構(gòu)造函數(shù)中仍然使用，現(xiàn)在我們只要繞過每次渲染都要生成新的函數(shù)的問題就可以了。我們可以通過只在構(gòu)造函數(shù)中綁定回調(diào)的上下問來解決這個(gè)問題，因?yàn)闃?gòu)造函數(shù)只會(huì)調(diào)用一次，而不是每次渲染都調(diào)用。 原文：Binding callbacks in React components 在組件中給事件綁定處理函數(shù)是很常見的，比如說每當(dāng)用戶點(diǎn)擊一個(gè)button的時(shí)候使用console.log打印一些...
摘要：如果你使用實(shí)驗(yàn)性屬性初始化語(yǔ)法，你能用這方法來正確綁定回調(diào)函數(shù)的綁定這語(yǔ)法在中默認(rèn)支持。然而，如果這回調(diào)函數(shù)是作為一個(gè)傳遞到更下一級(jí)的組件中的時(shí)候，些組件可能會(huì)做一個(gè)額外的重新渲染。 下面是react官方文檔的個(gè)人翻譯，如有翻譯錯(cuò)誤，請(qǐng)多多指出原文地址：https://facebook.github.io/re... Handling events with React element...
摘要：前言又稱通過一些新的關(guān)鍵字，使類成為了中一個(gè)新的一等公民。類聲明在中，有兩個(gè)聲明類的方式。在使用了新的關(guān)鍵字后在底層，所做的，也只是將這個(gè)方法添加為構(gòu)造函數(shù)的一個(gè)屬性。在想要調(diào)用父類的構(gòu)造函數(shù)時(shí)，你可以簡(jiǎn)單地將關(guān)鍵字視作一個(gè)函數(shù)使用，如。 前言 EcmaScript 2015 （又稱ES6）通過一些新的關(guān)鍵字，使類成為了JS中一個(gè)新的一等公民。但是目前為止，這些關(guān)于類的新關(guān)鍵字僅僅是建...
閱讀 2474·2021-11-22 13:53
閱讀 1163·2021-09-22 16:06
閱讀 1401·2021-09-02 15:21
閱讀 1936·2019-08-30 15:55
閱讀 3148·2019-08-29 11:19
閱讀 1951·2019-08-26 13:23
閱讀 967·2019-08-23 18:23
閱讀 1783·2019-08-23 16:06
