react中的constructor方法的理解

2021-09-29 04:30:19 字數 943 閱讀 7454

之前在使用react建立類,都會寫上constructor方法:

constructor(props)

好記性不如爛筆頭,記錄一下吧!

(1)constructor是否有必要寫:

es5的繼承,實質是先創造子類的例項物件this,然後再將父類的方法新增到this上。

es6的繼承機制不同,實質是先創造父類的例項物件this,所以必須先呼叫super方法。,

然後再用自己的建構函式修改this。如果子類沒有定義constructor方法,這個方法會被預設

新增,也就是說,不管有沒有顯示定義,任何乙個子類都有constructor方法。

如果元件要定義自己的state初始狀態的話,需要寫在constructor方法中,

如果沒有state,就可以不用constructor函式。【不過此時推薦使用無狀態元件】

(2)constructor方法中super,傳遞的引數props是否有必要寫,作用?

首先,我們需要明確:

一旦我們在類中寫了constructor方法,就必須使用super(),這樣

元件才有自己的this,在元件的全域性中都可以使用this關鍵字,

否則如果只是constructor而不執行super()那麼之後的this都是錯的。

那麼super中的引數必須寫引數props嗎?

結論是:當想再constructor中使用this.props的時候,super需要加入props

另外:如果constructor中不通過super來接收props,在其他生命週期,

諸如componentwillmount、componentdidmount、render中能直接使用this.props嗎??

結論:可以的,react在除了constructor之外的生命週期已經傳入了this.props了,完全不受super(props)的影響。

react中的通訊

import react,from react class extends component render data 自定義類名 省略 class extends component render import proptypes from prop types class extends com...

react 動態修改路由 React中的路由設定

在本文中,我們來看看如何在react中設定路徑路由。我們期望在結尾時取得如下的成績 在本次演示中,我們建立了三個頁面 page 1,page 2,page 3。為了簡化處理,三個頁面的定義類似如下 import react from react function page1 from react r...

react解密 react中key的作用是什麼?

我們知道,不管是在vue還是react中,當迴圈列表的時候,往往會寫乙個key,那麼這個key起到了什麼作用呢?其實,key是react用來追蹤哪些列表的元素被修改,被新增或者是被刪除的輔助標示。在開發過程中我們需要保證某個元素的key在其同級元素中具有唯一性。在react的diff演算法中reac...