我聽說 Hooks 最近很火。諷刺的是，我想用一些關(guān)于 class 組件的有趣故事來開始這篇文章。你覺得如何？

本文中這些坑對(duì)于你正常使用 React 并不是很重要。 但是假如你想更深入的了解它的運(yùn)作方式，就會(huì)發(fā)現(xiàn)實(shí)際上它們很有趣。

開始第一個(gè)。

首先在我的職業(yè)生涯中寫過的super(props) 自己都記不清：

class Checkbox extends React.Component { constructor(props) {  super(props);  this.state = { isOn: true }; } // ...}

當(dāng)然，在類字段提案 （class fields proposal） 中建議讓我們跳過這個(gè)開頭：

class Checkbox extends React.Component { state = { isOn: true }; // ...}

在2015年 React 0.13 增加對(duì)普通類的支持時(shí)，曾經(jīng)打算用這樣的語法。定義constructor和調(diào)用super(props) 始終是一個(gè)臨時(shí)的解決方案，可能要等到類字段能夠提供在工程學(xué)上不那么反人類的替代方案。

不過還是讓我們回到前面這個(gè)例子，這次只用ES2015的特性：

class Checkbox extends React.Component { constructor(props) {  super(props);  this.state = { isOn: true }; } // ...}

為什么我們要調(diào)用super？ 可以調(diào)用它嗎？ 如果必須要調(diào)用，不傳遞prop參數(shù)會(huì)發(fā)生什么？ 還有其他參數(shù)嗎？ 接下來我們?cè)囈辉嚕?/p>

在 JavaScript 中，super 指的是父類的構(gòu)造函數(shù)。（在我們的示例中，它指向React.Component 的實(shí)現(xiàn)。）

重要的是，在調(diào)用父類構(gòu)造函數(shù)之前，你不能在構(gòu)造函數(shù)中使用this。 JavaScript 是不會(huì)讓你這樣做的：

class Checkbox extends React.Component { constructor(props) {  // 這里還不能用 `this`   super(props);  // 現(xiàn)在可以用了  this.state = { isOn: true }; } // ...}

為什么 JavaScript 在使用this之前要先強(qiáng)制執(zhí)行父構(gòu)造函數(shù)，有一個(gè)很好的理由能夠解釋。 先看下面這個(gè)類的結(jié)構(gòu)：

class Person { constructor(name) {  this.name = name; }}class PolitePerson extends Person { constructor(name) {  this.greetColleagues(); //這行代碼是無效的，后面告訴你為什么  super(name); } greetColleagues() {  alert('Good morning folks!'); }}

如果允許在調(diào)用super之前使用this的話。一段時(shí)間后，我們可能會(huì)修改greetColleagues，并在提示消息中添加Person的name：

 greetColleagues() {  alert('Good morning folks!');  alert('My name is ' + this.name + ', nice to meet you!'); }

但是我們忘記了super()在設(shè)置this.name之前先調(diào)用了this.greetColleagues()。 所以此時(shí)this.name還沒有定義！ 如你所見，像這樣的代碼很難想到問題出在哪里。

為了避免這類陷阱，JavaScript 強(qiáng)制要求：如果想在構(gòu)造函數(shù)中使用this，你必須首先調(diào)用super。 先讓父類做完自己的事！ 這種限制同樣也適用于被定義為類的 React 組件：

 constructor(props) {  super(props);  // 在這里可以用 `this`  this.state = { isOn: true }; }

這里又給我們留下了另一個(gè)問題：為什么要傳props參數(shù)？

你可能認(rèn)為將props傳給super是必要的，這可以使React.Component的構(gòu)造函數(shù)可以初始化this.props：

// Inside Reactclass Component { constructor(props) {  this.props = props;  // ... }}

這與正確答案很接近了 ―― 實(shí)際上它就是這么做的。

但是不知道為什么，即便是你調(diào)用super時(shí)沒有傳遞props參數(shù)，仍然可以在render和其他方法中訪問this.props。 （不信你可以親自去試試?。?/p>

這是究竟是為什么呢？ 事實(shí)證明，在調(diào)用構(gòu)造函數(shù)后，React也會(huì)在實(shí)例上分配props：

 // Inside React const instance = new YourComponent(props); instance.props = props;

因此，即使你忘記將props傳給super()，React 仍然會(huì)在之后設(shè)置它們。 這是有原因的。

當(dāng) React 添加對(duì)類的支持時(shí)，它不僅僅增加了對(duì) ES6 類的支持。它的目標(biāo)是盡可能廣泛的支持類抽象。 目前還不清楚 ClojureScript、CoffeeScript、ES6、Fable、Scala.js、TypeScript或其他解決方案是如何相對(duì)成功地定義組件的。 所以 React 故意不關(guān)心是否需要調(diào)用super()―― 即使是ES6類。

那么這是不是就意味著你可以寫super()而不是super(props)呢？

可能不行，因?yàn)樗匀皇橇钊死Щ蟮摹?當(dāng)然，React 稍后會(huì)在你的構(gòu)造函數(shù)運(yùn)行后分配this.props， 但是在調(diào)用super() 之后和構(gòu)造函數(shù)結(jié)束前這段區(qū)間內(nèi)this.props仍然是未定義的：

// Inside Reactclass Component { constructor(props) {  this.props = props;  // ... }}// Inside your codeclass Button extends React.Component { constructor(props) {  super(); //我們忘記了傳遞 props 參數(shù)  console.log(props);   // {}  console.log(this.props); // undefined  } // ...}

如果這種情況發(fā)生在從構(gòu)造函數(shù)調(diào)用的某個(gè)方法中，可能會(huì)給調(diào)試工作帶來很大的麻煩。 這就是為什么我建議總是調(diào)用super(props) ，即使在沒有必要的情況之下：

class Button extends React.Component { constructor(props) {  super(props); // 傳遞了 props 參數(shù)  console.log(props);   // {}  console.log(this.props); // {} } // ...}

這樣就確保了能夠在構(gòu)造函數(shù)退出之前設(shè)置好this.props。

最后一點(diǎn)是長期以來 React 用戶總是感到好奇的。

你可能已經(jīng)注意到，當(dāng)你在類中使用Context API時(shí)（無論是舊版的contextTypes或在 React 16.6中新添加的 contextType API），context 會(huì)作為第二個(gè)參數(shù)傳遞給構(gòu)造函數(shù)。

那么為什么我們不寫成super(props, context) 呢？ 我們可以這樣做，但是使用context的頻率較低，所以這個(gè)坑并沒有那么多影響。

根據(jù)類字段提案的說明，這些坑大部分都會(huì)消失。 如果沒有顯式構(gòu)造函數(shù)，則會(huì)自動(dòng)傳遞所有參數(shù)。 這允許在像state = {} 這樣的表達(dá)式中包含對(duì)this.props或this.context的引用（如果有必要的話）。

而有了 Hooks 之后，我們甚至不再有super或this。不過這是另外一個(gè)的話題了。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)武林網(wǎng)的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接