資訊專(zhuān)欄INFORMATION COLUMN
摘要：不過(guò)還是讓我們回到前面這個(gè)例子，這次只用的特性為什么我們要調(diào)用可以調(diào)用它嗎如果必須要調(diào)用，不傳遞參數(shù)會(huì)發(fā)生什么還有其他參數(shù)嗎接下來(lái)我們?cè)囈辉囋谥校傅氖歉割?lèi)的構(gòu)造函數(shù)。重要的是，在調(diào)用父類(lèi)構(gòu)造函數(shù)之前，你不能在構(gòu)造函數(shù)中使用。
翻譯：瘋狂的技術(shù)宅
原文：https://overreacted.io/why-do...
本文首發(fā)微信公眾號(hào)：jingchengyideng
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章
我聽(tīng)說(shuō) Hooks 最近很火。諷刺的是，我想用一些關(guān)于 class 組件的有趣故事來(lái)開(kāi)始這篇文章。你覺(jué)得如何？
本文中這些坑對(duì)于你正常使用 React 并不是很重要。 但是假如你想更深入的了解它的運(yùn)作方式，就會(huì)發(fā)現(xiàn)實(shí)際上它們很有趣。
開(kāi)始第一個(gè)。
首先在我的職業(yè)生涯中寫(xiě)過(guò)的 super(props) 自己都記不清：
class Checkbox extends React.Component {
constructor(props) {
super(props);
this.state = { isOn: true };
}
// ...
}
當(dāng)然，在類(lèi)字段提案 （class fields proposal） 中建議讓我們跳過(guò)這個(gè)開(kāi)頭：
class Checkbox extends React.Component {
state = { isOn: true };
// ...
}
在2015年 React 0.13 增加對(duì)普通類(lèi)的支持時(shí)，曾經(jīng)打算用這樣的語(yǔ)法。定義 constructor 和調(diào)用 super(props) 始終是一個(gè)臨時(shí)的解決方案，可能要等到類(lèi)字段能夠提供在工程學(xué)上不那么反人類(lèi)的替代方案。
不過(guò)還是讓我們回到前面這個(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ù)嗎？ 接下來(lái)我們?cè)囈辉嚕?/p>
在 JavaScript 中，super 指的是父類(lèi)的構(gòu)造函數(shù)。（在我們的示例中，它指向React.Component 的實(shí)現(xiàn)。）
重要的是，在調(diào)用父類(lèi)構(gòu)造函數(shù)之前，你不能在構(gòu)造函數(shù)中使用this。 JavaScript 是不會(huì)讓你這樣做的：
class Checkbox extends React.Component {
constructor(props) {
//
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101509.html
摘要：如果某個(gè)組件訂閱該事件太晚，那發(fā)布者之前所發(fā)布的該類(lèi)事件，它都接收不到，而方案一和二的優(yōu)點(diǎn)則在于，無(wú)論如何，組件都能拿到該的最終狀態(tài)值有存在內(nèi)存泄漏的風(fēng)險(xiǎn)。 原文地址 - 歡迎關(guān)注我的博客 在我們r(jià)eact項(xiàng)目日常開(kāi)發(fā)中，往往會(huì)遇到這樣一個(gè)問(wèn)題：如何去實(shí)現(xiàn)跨組件通信？ 為了更好的理解此問(wèn)題，接下來(lái)我們通過(guò)一個(gè)簡(jiǎn)單的栗子說(shuō)明。 實(shí)現(xiàn)一個(gè)視頻播放器 假設(shè)有一個(gè)這樣的需求，需要我們?nèi)?shí)現(xiàn)一個(gè)...
摘要：如果某個(gè)組件訂閱該事件太晚，那發(fā)布者之前所發(fā)布的該類(lèi)事件，它都接收不到，而方案一和二的優(yōu)點(diǎn)則在于，無(wú)論如何，組件都能拿到該的最終狀態(tài)值有存在內(nèi)存泄漏的風(fēng)險(xiǎn)。 原文地址 - 歡迎關(guān)注我的博客 在我們r(jià)eact項(xiàng)目日常開(kāi)發(fā)中，往往會(huì)遇到這樣一個(gè)問(wèn)題：如何去實(shí)現(xiàn)跨組件通信？ 為了更好的理解此問(wèn)題，接下來(lái)我們通過(guò)一個(gè)簡(jiǎn)單的栗子說(shuō)明。 實(shí)現(xiàn)一個(gè)視頻播放器 假設(shè)有一個(gè)這樣的需求，需要我們?nèi)?shí)現(xiàn)一個(gè)...
摘要：用處你在組建中所有的移除所有組建中的監(jiān)聽(tīng)生命周期父子組件渲染順序父組件代碼引入子組件子組件代碼瀏覽器中的執(zhí)行結(jié)果如下圖結(jié)論所以在的組件掛載及過(guò)程中，最底層的子組件是最先完成掛載及更新的。 原文首發(fā)在我的個(gè)人博客：歡迎點(diǎn)此訪問(wèn)我的個(gè)人博客 學(xué)了一段時(shí)間的react了，現(xiàn)在對(duì)自己學(xué)習(xí)的react的生命周期做一個(gè)簡(jiǎn)單總結(jié)（如有錯(cuò)誤請(qǐng)留言指正，謝謝） react一共有如下幾個(gè)生命周期函數(shù) c...
摘要：已經(jīng)被廢除，具體缺陷可以參考二為了解決的缺陷，第二種解決方案是高階組件簡(jiǎn)稱(chēng)。我們定義了父組件，存在自身的，并且將自身的通過(guò)的方式傳遞給了子組件。返回一個(gè)標(biāo)識(shí)該的變量，以及更新該的方法。 ??為了實(shí)現(xiàn)分離業(yè)務(wù)邏輯代碼，實(shí)現(xiàn)組件內(nèi)部相關(guān)業(yè)務(wù)邏輯的復(fù)用，在React的迭代中針對(duì)類(lèi)組件中的代碼復(fù)用依次發(fā)布了Mixin、HOC、Render props等幾個(gè)方案。此外，針對(duì)函數(shù)組件，在Reac...
摘要：已經(jīng)被廢除，具體缺陷可以參考二為了解決的缺陷，第二種解決方案是高階組件簡(jiǎn)稱(chēng)。我們定義了父組件，存在自身的，并且將自身的通過(guò)的方式傳遞給了子組件。返回一個(gè)標(biāo)識(shí)該的變量，以及更新該的方法。 ??為了實(shí)現(xiàn)分離業(yè)務(wù)邏輯代碼，實(shí)現(xiàn)組件內(nèi)部相關(guān)業(yè)務(wù)邏輯的復(fù)用，在React的迭代中針對(duì)類(lèi)組件中的代碼復(fù)用依次發(fā)布了Mixin、HOC、Render props等幾個(gè)方案。此外，針對(duì)函數(shù)組件，在Reac...
閱讀 3039·2021-11-12 10:36
閱讀 4780·2021-09-22 10:57
閱讀 1588·2021-09-22 10:53
閱讀 2681·2019-08-30 15:55
閱讀 3507·2019-08-29 17:00
閱讀 3365·2019-08-29 16:36
閱讀 2478·2019-08-29 13:46
閱讀 1360·2019-08-26 11:45
