react 之 ES6建立元件的知識

2021-09-24 07:12:46 字數 780 閱讀 9600

首先要了解react建立元件的三種方法:

函式式無狀態元件

es5方式 react.createclass 建立元件

es6方式 extends react.component

首先要了解一下es6中的class  。在calss方法中,繼承是使用extends關鍵字來實現的。子類必須在constructor()呼叫super()方法,否則新建例項時會報錯。

報錯的原因是:子類是沒有自己的this物件的,它只能繼承自父類的this物件,然後對其進行加工,而super()就是將父類中的this對向繼承給子類的。沒有super,子類就得不到this物件。

constructor() ------構造方法

這是es6對類的預設方法,通過new命令生成物件例項時呼叫該方法。並且,該方法是類中必須有的,如果沒有顯示定義,則會預設新增空的constructor()方法

super(props) -----super() -----以及不寫super的區別                        --------------繼承

如果用到constructor就必須寫super()是用來初始化this的,可以繫結事件到this上

如果在constructor 中使用this.props,就必須給super加引數 super(props)

如果沒有用到constructor是可以不寫的;react會預設新增乙個空的constructor

(無論有沒有constructor,在render中this.props都是可以使用的,這是react

自動附帶的)

ES 6 裝飾器與 React 高階元件

關於 decorator 到底是 es 6 引入的還是 es 7 引入的我也不是很明白了,兩種說法都有,這種問題懶得糾結了 在用的時候發現這個東西很好用,平常用處可能不大,但是結合 react 就很好使了。接下來就講一講。我搭建了乙個 react 開發環境,結合 babel 的外掛程式 babel ...

ES 6 裝飾器與 React 高階元件

關於 decorator 到底是 es 6 引入的還是 es 7 引入的我也不是很明白了,兩種說法都有,這種問題懶得糾結了 在用的時候發現這個東西很好用,平常用處可能不大,但是結合 react 就很好使了。接下來就講一講。我搭建了乙個 react 開發環境,結合 babel 的外掛程式 babel ...

利用ES6語法重構React元件詳解

一 建立元件 es6 class建立的元件語法更加簡明,也更符合j ascript。內部的方法不需要使用function關鍵字。react.createclass import react from react const mycomponent react.createclass export d...