react 的知識詳解

　　用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

Hello {name}

　　　　　　　　})

　　　　　　}

　　　　　

　　　　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 (銷毀&清理期),以下為具體順序

##　　　　-[註]componentDidMount不會在服務端被渲染的過程中呼叫。

　　　　-[解] 各個週期詳細說明:

　　　　　　getDefaultProps

　　　getDefaultProps

　　　　　　一　一次這個實例將只講一個實例來一次。組件類別的所有後續應用，getDefaultPops 將不會再被調用，其返回的物件可以用於設定預設的props(properties的縮寫) 值。

　　　　　　getInitialState

　　　　　　　　對於元件的每個實例來說，這個方法的呼叫

有且只有一次，

#的實例的實例只有一次，
state，在這個方法裡，可以存取元件的props。每個React元件都有自己的 state，與 props 的差別在於 state只存在元件的內部，props 在所有實例中共用。

getInitialState 和getDefaultPops 的呼叫是有區別的，getDefaultPops 是對於元件類別來說只調用一次，後續該類別的應用程式都不會被調用，而getInitialState 是對於每個元件實例來講都會調用，並且只調一次。 每次修改state，都會重新渲染元件，實例化後透過state 更新元件，會依序呼叫下列方法：

1、shouldComponentUpdate2、componentWillUpdate3、 render

4、componentDidUpdate

但

不要直接修改this.state，要透過this.setState 方法來修改。

　　　　　　componentWillMount

1. 　　　　　　　　此方法在首次渲染之前調用，也是重新修改 render 方法呼叫之前修改機會的機會。

　　　　　　render

2. 　　　　　　　　此方法會建立一個虛擬DOM，用來表示元件的輸出。對於一個元件來講，render方法是唯一必要的方法。 render方法需要滿足下面幾點：

3. 只能透過this.props 和this.state 存取資料（不能修改）

4. 可以返回null,false 或任何React元件

5. 只能出現一個頂層元件，不能傳回一組元素

不能改變元件的狀態## ##########不能修改DOM的輸出############render方法回傳的結果並不是真正的DOM元素，而是虛擬的表現，類似於一個DOM tree的結構的對象。 react之所以效率高，就是這個原因。 ###

　　　　　　componentDidMount

　　　　　　　　此方法不會在服務端被渲染的過程中呼叫。當方法被呼叫時，已經渲染出真實的DOM，可以再該方法中透過 this.getDOMNode() 存取到真實的DOM(建議使用 ReactDOM.findDOMNode()) 。由於元件並不是真實的 DOM 節點，而是存在於記憶體之中的資料結構，稱為虛擬 DOM （virtual DOM）。只有當它插入文件以後，才會變成真實的 DOM 。有時需要從元件取得真實DOM 的節點，這時就要用到 ref 屬性：如:

　　　　　　componentWillReceiveProps

##　的props 屬性可以透過父元件來更改，這時，componentWillReceiveProps 將來被呼叫。可以在這個方法裡更新 state,以觸發 render 方法重新渲染元件。

　　　　　　shouldComponentUpdate

　　　　　　　　阻止元件的重新渲染，回傳`false 則不會執行render 以及後面的componentWillUpdate，componentDidUpdate 方法。 該方法是非必須的，並且大多數情況下沒有在開發中使用。

　　　　　　componentWillUpdate

　　　　　　　　這個方法和componentWillMount 類似，在組件接收到了新的props 或者state 即將進行重新渲染前，componentWillUpdate(object nextProps, object nextState) 會被調用，

注意不要在此方面再去更新props 或state。

　　　　　　componentDidUpdate

　　　　　　　　這個方法和 componentDidMount 類似，在組件重新渲染可以在這裡存取並修改 DOM。

　　　　　　componentWillUnmount

　　　　　　　　　每當ReactWill_

]銷毀工作，在componentDidMount 中新增的任務都需要再該方法中撤銷，例如建立的計時器或事件監聽器。

以上是react 的知識詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn