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