個人感覺ReactJS相比於傳統的JS框架還是挺有意思的,主要是它將JS代碼和HTML代碼完美的結合在了一起,有點jsp把java代碼和html混在一起寫的意思?但是它通過組件的形式實現了代碼可復用,避免了我們傳統的.html(字符串)這種形式去重載標簽,並且實現了虛擬DOM機制,將標簽變化的過程進行了隱藏,不需要同步到頁面,提高了性能.
最后,個人認為ReactJS是面向組件的編程語言,至於什么是面向組件,看下去你自然就能體會到了
下面使用一些Demo自行體會吧.
DEMO源碼的git地址為 https://github.com/yangfeixxx/ReactJSDemo.git
ReactDOM.render()方法的意思為渲染某個DOM對象,這段代碼的意思就是在id為example的DOM對面里添加一個<h1>子標簽
在ReactJS框架渲染里,碰到<>符號意味解析html標簽,{}則為解析js.我這里將一個數組放進去,可以自動進行遍歷.當然也可以使用names.map(function(name)){}這樣一個個遍歷處理
React.createClass這個方法是為了創建一個組件,組件算是React特有的概念?組件里的DOM不會馬上顯示到頁面上,而是在引用並處理完的時候才會顯示在頁面上(這個做法是為了提高性能),不過請記住一點，組件里render()方法返回只能返回一個頂級標簽,也就是說如果是<div><span></span></div>這樣可以但如果是<div></div><span></span>這樣就會報錯
props屬性可以拿到組件上定義的一系列屬性
舉一反三下應該就能知道這個是為了拿到組件里的children標簽吧,之所以使用React.Children.map,而不是直接拿到childrens.map(),是因為直接拿的話,只有在多個子標簽的情況下才能拿到數組,一個的話是個object,沒有的話則是undefined,而React.Children.map()則是React提供的工具類,可以幫我們處理這幾種情況
使用getDefaultProps方法可以返回組件默認的屬性,如果自定義了,則會覆蓋默認的
這個是ReactJS組件事件函數的用法,refs.key可以拿到DOM對象,前提是標簽里定義了ref屬性
getInitState方法可以定義一些組件的初始化狀態,這里要提醒的是組件的事件每次被觸發都會再觸發一次render方法,對dom重新渲染
