參考:
1. 由react.createclass變為react.component
var switchbutton = react.createclass({})
class
switchbutton
extends
react.component {}
2.狀態寫法
getinitialstate: function
() ;}
更改為:
constructor
(props)
}
getdefaultprop:function
() }
更改為:
switchbutton.defaultprops =
3.匯入模組部分
var react = require('react');
var reactdom = require('react-dom');
更改為:
import react from
'react'
import from
'react-dom'
4.事件函式繫結
react.component建立元件時,事件函式並不會自動繫結this,需要我們手動繫結,不然this將不會指向當前元件的例項物件。以下有三種繫結this的方法:
(1)在constructor中使用bind()進行繫結:
constructor
()
(2)直接元素上繫結:
(3)箭頭符號:this.handleclick()}>
5.無狀態元件(stateless component)–sfc
它的出現 是因為隨著應用複雜度不斷提公升和元件本數量的增加,元件按各自職責被分成不同的型別,於是有一種只負責展示的純元件出現了,它的特點是不需要管理狀態state,資料直接通過props傳入,這也符合 react 單向資料流的思想。
const todo = () => (
onclick=
style=
}>
li>
)
當然,無狀態元件也不是萬金油,比如它不支援」ref「,原因很簡單,因為 react 呼叫它之前,元件不會被例項化,自然也就沒有」ref」,(ref和finddomnode實際上打破了父子元件之間僅通過 props 來傳遞狀態的約定,違背了 react 的原則,需要避免)。
react.createclass親生的 mixin,react.component不再支援,事實上 mixin 不夠優雅直觀,替代方案是使用更流行的高階元件-hoc,如果你的專案還離不開 也可以使用 react-mixin
es6學習(持續更新)
剛開始學習es6。本文件主要對es6的基礎語法進行歸納首先,切記要 use strict 宣告 1.let宣告 let a 1 let a 2 報錯console.log b 報錯,而用var宣告變數為undefined let b 2 for let i 0 i 9 i console.log i...
es6 陣列 持續更新
1 map 對映 乙個對乙個 如 12,56,99,86,45,91 對映成 不及格,不及格,及格,及格,不及格,及格 引數 item 當前元素值 index 當前元素索引 arr 原陣列2 reduce 彙總 彙總出來乙個 3 filter 過濾 4 foreach 迴圈第乙個引數是遍歷的陣列內容...
ES6學習,持續更新!!!
mdn 解構賦值 mdn export es6 import export用法 注意 export from src main 含義是 匯出其他模組的匯出 mdn import es6 import export用法 react import 配置路徑別名 簡化import component的方式...