用react一年多了.一直是在别人的影子下写的代码,他们也确实都是大神级的人物,不过,小菜鸟也有小菜鸟的思想~这不,今天就在重温一遍react!记一些零碎的知识点~所有的这些均参考于
react官方文档 facebook.github.io/react/docs/events.html#supported-events
1 var names = ['fr','de']
ReactDOM.render(
(1)
document.getElementById('h1')
(2)
{
names.map(function(name){
return
})
}
document.getElementById('h1')
)
ReactDom.render是React的基本語法,
ReactDom.render是React的基本語法,用處插入範本節點
react的特有語法:JSX 上例允許HTML和JavaScript混合
JSX的基本語法規則:1 遇到HTML標籤用<>開頭,會用HTML規則解析,遇到程式碼區塊用{}開頭,會以javaScript解析
元件:React允許將程式碼封裝成元件,然後向插入普通HTML標籤一樣,在網頁中插入這個元件,React.createClass用於產生一個元件類別,而且元件類別只能一個頂層標籤
這個就是錯的,因為他有兩個標籤,應該在最外邊包含一個
組件的用法於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屬性:驗證元件實例的屬性是否符合要求,
propTypes
取得真實的DOM節點:利用this.refs.[refName]
this.state和this.props都是描述元件的特性,區別在於:this.state指的是可以改變的特性,而this.props指的是一旦定義就不在改變的特性
react的生命週期:
# -[] 一個React組件的生命週期分為三個部分：1 已插入真實DOM:Mounting(實例化)、2 Updating:正在被重新渲染(存在期) 3 已移除真實DOm (銷毀&清理期),以下為具體順序
getInitialState
對於元件的每個實例來說，這個方法的呼叫
有且只有一次，
#的實例的實例只有一次，
state，在這個方法裡，可以存取元件的props。每個React元件都有自己的 state，與 props 的差別在於 state只存在元件的內部，props 在所有實例中共用。
getInitialState 和getDefaultPops 的呼叫是有區別的，getDefaultPops 是對於元件類別來說只調用一次，後續該類別的應用程式都不會被調用，而getInitialState 是對於每個元件實例來講都會調用，並且只調一次。 每次修改state，都會重新渲染元件，實例化後透過state 更新元件，會依序呼叫下列方法：
componentWillMount
此方法不會在服務端被渲染的過程中呼叫。當方法被呼叫時，已經渲染出真實的DOM，可以再該方法中透過 this.getDOMNode() 存取到真實的DOM(建議使用 ReactDOM.findDOMNode()) 。由於元件並不是真實的 DOM 節點，而是存在於記憶體之中的資料結構，稱為虛擬 DOM （virtual DOM）。只有當它插入文件以後，才會變成真實的 DOM 。有時需要從元件取得真實DOM 的節點，這時就要用到 ref 屬性：如:
## 的props 屬性可以透過父元件來更改，這時，componentWillReceiveProps 將來被呼叫。可以在這個方法裡更新 state,以觸發 render 方法重新渲染元件。
阻止元件的重新渲染，回傳`false 則不會執行render 以及後面的componentWillUpdate，componentDidUpdate 方法。 該方法是非必須的，並且大多數情況下沒有在開發中使用。
componentDidUpdate
以上是react 的知識詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
