首先要了解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...