談談super(props) 的重要性

ninefive 發布于2019-08-23 15:06 / 1279人閱讀

摘要：不過還是讓我們回到前面這個例子，這次只用的特性為什么我們要調用可以調用它嗎如果必須要調用，不傳遞參數會發生什么還有其他參數嗎接下來我們試一試在中，指的是父類的構造函數。重要的是，在調用父類構造函數之前，你不能在構造函數中使用。

翻譯：瘋狂的技術宅
原文：https://overreacted.io/why-do...

本文首發微信公眾號：jingchengyideng
歡迎關注，每天都給你推送新鮮的前端技術文章

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

本文中這些坑對于你正常使用 React 并不是很重要。但是假如你想更深入的了解它的運作方式，就會發現實際上它們很有趣。

開始第一個。

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

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

當然，在類字段提案（class fields proposal）中建議讓我們跳過這個開頭：

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

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

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

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

為什么我們要調用super？可以調用它嗎？如果必須要調用，不傳遞prop參數會發生什么？還有其他參數嗎？接下來我們試一試：

在 JavaScript 中，super 指的是父類的構造函數。（在我們的示例中，它指向React.Component 的實現。）

重要的是，在調用父類構造函數之前，你不能在構造函數中使用this。 JavaScript 是不會讓你這樣做的：

class Checkbox extends React.Component {
  constructor(props) {
    //

GPU云服務器云服務器談談對php的理解 super 好域名的重要性學算法的重要性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101509.html

一個播放器引發的思考——談談React跨組件通信

摘要：如果某個組件訂閱該事件太晚，那發布者之前所發布的該類事件，它都接收不到，而方案一和二的優點則在于，無論如何，組件都能拿到該的最終狀態值有存在內存泄漏的風險。原文地址 - 歡迎關注我的博客在我們react項目日常開發中，往往會遇到這樣一個問題：如何去實現跨組件通信？為了更好的理解此問題，接下來我們通過一個簡單的栗子說明。實現一個視頻播放器假設有一個這樣的需求，需要我們去實現一個...

Dean 2019-08-26 13:50 評論0 收藏0
一個播放器引發的思考——談談React跨組件通信

摘要：如果某個組件訂閱該事件太晚，那發布者之前所發布的該類事件，它都接收不到，而方案一和二的優點則在于，無論如何，組件都能拿到該的最終狀態值有存在內存泄漏的風險。原文地址 - 歡迎關注我的博客在我們react項目日常開發中，往往會遇到這樣一個問題：如何去實現跨組件通信？為了更好的理解此問題，接下來我們通過一個簡單的栗子說明。實現一個視頻播放器假設有一個這樣的需求，需要我們去實現一個...

zhongmeizhi 2019-08-02 15:06 評論0 收藏0
簡單談談我理解的React組件生命周期

摘要：用處你在組建中所有的移除所有組建中的監聽生命周期父子組件渲染順序父組件代碼引入子組件子組件代碼瀏覽器中的執行結果如下圖結論所以在的組件掛載及過程中，最底層的子組件是最先完成掛載及更新的。原文首發在我的個人博客：歡迎點此訪問我的個人博客學了一段時間的react了，現在對自己學習的react的生命周期做一個簡單總結（如有錯誤請留言指正，謝謝） react一共有如下幾個生命周期函數 c...

lowett 2019-08-26 11:36 評論0 收藏0
從Mixin到hooks，談談對React16.7.0-alpha中即將引入的hooks的理解

摘要：已經被廢除，具體缺陷可以參考二為了解決的缺陷，第二種解決方案是高階組件簡稱。我們定義了父組件，存在自身的，并且將自身的通過的方式傳遞給了子組件。返回一個標識該的變量，以及更新該的方法。 ??為了實現分離業務邏輯代碼，實現組件內部相關業務邏輯的復用，在React的迭代中針對類組件中的代碼復用依次發布了Mixin、HOC、Render props等幾個方案。此外，針對函數組件，在Reac...

ZweiZhao 2019-08-02 11:52 評論0 收藏0
從Mixin到hooks，談談對React16.7.0-alpha中即將引入的hooks的理解

摘要：已經被廢除，具體缺陷可以參考二為了解決的缺陷，第二種解決方案是高階組件簡稱。我們定義了父組件，存在自身的，并且將自身的通過的方式傳遞給了子組件。返回一個標識該的變量，以及更新該的方法。 ??為了實現分離業務邏輯代碼，實現組件內部相關業務邏輯的復用，在React的迭代中針對類組件中的代碼復用依次發布了Mixin、HOC、Render props等幾個方案。此外，針對函數組件，在Reac...

funnyZhang 2019-08-29 17:09 評論0 收藏0