用react一年多了.一直是在別人的影子下寫的代碼,他們也確實都是大神級的人物,不過,小菜鳥也有小菜鳥的思想~這不,今天就在重溫一遍react!記一些零碎的知識點~不知道對你們有沒有用,不過,對於我,絕對有用!所有的這些均參考於http://www.ruanyifeng.com/blog/2015/ ...
用react一年多了.一直是在別人的影子下寫的代碼,他們也確實都是大神級的人物,不過,小菜鳥也有小菜鳥的思想~這不,今天就在重溫一遍react!記一些零碎的知識點~不知道對你們有沒有用,不過,對於我,絕對有用!所有的這些均參考於http://www.ruanyifeng.com/blog/2015/03/react.html
react官方文檔 https://facebook.github.io/react/docs/events.html#supported-events
1 var names = ['fr','de']
ReactDOM.render(
(1)<h1 id='h1'>你好,學長</h1>
document.getElementById('h1')
(2)<div>
{
names.map(function(name){
return <div>Hello {name} </div>
})
}
</div>
document.getElementById('h1')
)
ReactDom.render是React的基本語法,用處:將模板轉為HTML,並插入指定的DOM節點
react的特有語法:JSX 上例允許HTML和JavaScript混寫
JSX的基本語法規則:1 遇到HTML標簽用<>開頭,會用HTML規則解析,遇到代碼塊用{}開頭,會以javaScript解析
組件:React允許將代碼封裝成組件,然後向插入普通HTML標簽一樣,在網頁中插入這個組件,React.createClass用於生成一個組件類,而且組件類只能一個頂層標簽
這個就是錯的,因為他有兩個標簽 ,應該在最外邊包含一個<div>標簽
組件的用法於HTML標簽用法一致,組件的屬性可以用this.props對象獲取,有一點需要註意:他的class和for屬性需要變成className和htmlFor,因為class和for是JavaScript的保留字
this.props的屬性與組件的屬性一一對應,但this.props.children代表組件的所有子節點,this.props.children有三種可能性,若沒子節點,則表示undefind,有一個子節點則表示object,若為多個子節點,則為array,react提供了一個工具方法來處理this.props.children, 就是React.Children.map()來遍歷子節點
PropTypes屬性:驗證組件實例的屬性是否滿足要求
getDefaultProps方法:用來設置屬性的預設值
獲取真實的DOM節點:利用this.refs.[refName]
this.state和this.props都是描述組件的特性,區別在於:this.state指的是可以改變的特性,而this.props指的是一旦定義就不在改變的特性
