React的學習（下）

本文接著上篇文章繼續講解react的基礎語法

文字輸入框的值，不能用 this.props.value 讀取，而要定義乙個 onchange 事件的**函式，通過 event.target.value 讀取使用者輸入的值。textarea 元素、select元素、radio元素都屬於這種情況，更多介紹請參考官方文件。

如果你希望react指定初始值，但不再控制後續更新。要處理這種情況，可以指定乙個defaultvalue屬性而不是value。

和支援defaultchecked，與支援defaultvalue。

元件的生命週期分成三個狀態：

react 為每個狀態都提供了兩種處理函式，will 函式在進入狀態之前呼叫，did 函式在進入狀態之後呼叫，三種狀態共計五種處理函式。

componentwillmount()

componentdidmount()

componentwillupdate(object nextprops, object nextstate)

componentdidupdate(object prevprops, object prevstate)

componentwillunmount()

此外，react 還提供兩種特殊狀態的處理函式。

componentwillreceiveprops(object nextprops)：已載入元件收到新的引數時呼叫

shouldcomponentupdate(object nextprops, object nextstate)：元件判斷是否重新渲染時呼叫

react並沒有像angular一樣一手包辦，連http服務都幫我們封裝好了，因為它提倡的是以react為核心，同時你可以使用其他的庫，增加**的靈活性，而不是一手包辦，所以react是個輕量的庫。

元件的資料**，通常是通過 ajax 請求從伺服器獲取，可以使用 componentdidmount 方法設定 ajax 請求，等到請求成功，再用 this.setstate 方法重新渲染 ui 。

因為class是es6語法裡的關鍵字，所以在react裡使用class時，應該改為classname,例如

style的值是物件，所以如下：

let backandtextcolor = ; 
看背景顏色和文字顏色
//或者，注意是雙括號哦，第一層是{}是jsx語法，第二層{}代表是物件，是不是一目了然了
看背景顏色和文字顏色

通過設定標籤的ref屬性，然後用this.refs['前面的ref名']訪問

可以拿到原生的節點後，這時就可以使用其他方法比如jquery操作原生的節點【題外話：通過$()[0],可以從jquery物件中拿到原生物件】

var mycomponent = react.createclass(,
render: function() 
});reactdom.render(
, document.getelementbyid('example')
);

上面**中，元件 mycomponent 的子節點有乙個文字輸入框，用於獲取使用者的輸入。這時就必須獲取真實的 dom 節點，虛擬 dom 是拿不到使用者輸入的。為了做到這一點，文字輸入框必須有乙個 ref 屬性，然後 this.refs.[refname] 就會返回這個真實的 dom 節點。

通過這個ref我們同樣可以獲取input的輸入值。就是這麼簡單。

但是使用過程中我們切記：由於 this.refs.[refname] 屬性獲取的是真實 dom ，所以必須等到虛擬 dom 插入文件以後，才能使用這個屬性，否則會報錯。上面**中，通過為元件指定 click 事件的**函式，確保了只有等到真實 dom 發生 click 事件之後，才會讀取 this.refs.[refname] 屬性。

接下來展示乙個簡單的demo，實現網頁時鐘顯示

class timer extends react.component;
} tick());
} componentdidmount(),1000);
this.tick(); //元件剛掛載時執行tick()，可以避免出現0:0:0
} render():
: );
}}reactdom.render(
, document.getelementbyid('root')
);

React的學習（下）

react學習六 react路由

我的react學習

React 學習01 React 的基本使用

React的學習（下）

react學習六 react路由

我的react學習

React 學習01 React 的基本使用

相關推薦