本篇文章主要的介紹了關(guān)於react的使用情況，有興趣的同學(xué)可以點進來看看關(guān)於react的使用，下面讓我們一起來看這篇文章的內(nèi)容吧

一.?? React Props

? 1. 使用props

state 和props 主要的差異在於props 是不可變的，而state 可以根據(jù)與使用者交互來改變。這就是為什麼有些容器元件需要定義 state 來更新和修改資料。而子元件只能透過 props 來傳遞資料。

實例中 name 屬性透過this.props.name 來取得。

2。預(yù)設(shè)props

你可以透過getDefaultProps() 方法為 props 設(shè)定預(yù)設(shè)值。

二.元件API

1.????????設(shè)定狀態(tài)：setState

setState(objectnextState[, function callback])

#（ 1）參數(shù)說明:

nextState，將要設(shè)定的新狀態(tài)，該狀態(tài)會和目前的state合併

callback，可選參數(shù)，回呼函數(shù)。函數(shù)會在setState設(shè)定成功，且元件重新渲染後呼叫。

合併nextState和目前state，並重新渲染元件。 setState是React事件處理函數(shù)中和請求回呼函數(shù)中觸發(fā)UI更新的主要方法。

（2）關(guān)於setStaate

不能在元件內(nèi)部透過this.state修改狀態(tài)，因為該狀態(tài)會在呼叫setState()後被取代。

setState()並不會立即改變this.state，而是建立一個即將處理的state。 setState()不一定是同步的，為了提升效能React會批次執(zhí)行state和DOM渲染。

setState()總是會觸發(fā)一次元件重繪，除非在shouldComponentUpdate()中實作了一些條件渲染邏輯。

2.????????取代狀態(tài)：replaceState

replaceState(object nextState[, functioncallback])

nextState，將要設(shè)定的新狀態(tài)，該狀態(tài)會替換目前的state。

callback，可選參數(shù)，回呼函數(shù)。此函數(shù)會在replaceState設(shè)定成功，且元件重新渲染後呼叫。

replaceState()方法與setState()類似，但是方法只會保留nextState中狀態(tài)，原state不在nextState中的狀態(tài)都會被刪除。

3.????????設(shè)定屬性：setProps

setProps(object nextProps[, functioncallback])

#nextProps，將要設(shè)定的新屬性，該狀態(tài)會和目前的props合併

callback，可選參數(shù)，回呼函數(shù)。此函數(shù)會在setProps設(shè)定成功，且元件重新渲染後呼叫。

設(shè)定元件屬性，並重新渲染元件。

4.????????取代屬性：replaceProps

replaceProps(object nextProps[, functioncallback])

nextProps，將要設(shè)定的新屬性，該屬性會取代目前的props。

callback，可選參數(shù)，回呼函數(shù)。此函數(shù)會在replaceProps設(shè)定成功，且元件重新渲染後呼叫。

replaceProps()方法與setProps類似，但它會刪除原有props

5.????????強制更新：forceUpdate

##forceUpdate([function callback])

?forceUpdate()方法會使元件呼叫自身的render()方法重新渲染元件，元件的子元件也會呼叫自己的render()。但是，當(dāng)元件重新渲染時，還是會讀取this.props和this.state，如果狀態(tài)沒有改變，那麼React只會更新DOM。

forceUpdate()方法適用於this.props和this.state以外的元件重繪（如：修改了this.state之後），透過此方法通知React需要呼叫render ()

6.????????取得DOM節(jié)點：findDOMNode

DOMElement findDOMNode()

#返回值：DOM元素DOMElement

##如果元件已經(jīng)掛載到DOM中，則該方法會傳回對應(yīng)的本機瀏覽器DOM 元素。當(dāng)render回傳null 或 false時，this.findDOMNode()也會回傳null。從DOM 讀取值的時候，方法很有用，如：取得表單欄位的值和做一些 DOM 操作。

7.????????判斷元件掛載狀態(tài)：isMounted

bool isMounted()

傳回值：true或false，表示元件是否已掛載到DOM中（想看更多就到PHP中文網(wǎng)React參考手冊欄位中學(xué)習(xí)）

isMounted( )方法用來判斷元件是否已掛載到DOM。可以使用此方法保證了setState()和forceUpdate()在非同步場景下的呼叫不會出錯。

三.React 元件生命週期

1. 元件的生命週期可分成三個狀態(tài)：

Mounting：已插入真實DOM

Updating：正在重新渲染

Unmounting：已移出真實DOM

2.生命週期的方法有：

1)????componentWillMount#?在渲染前呼叫,在客戶端也在服務(wù)端。

2)????#componentDidMount?: 第一次渲染後調(diào)用，只在客戶端。之後元件已經(jīng)產(chǎn)生了對應(yīng)的DOM結(jié)構(gòu)，可以透過this.getDOMNode()來存取。如果你想和其他JavaScript框架一起使用，可以在這個方法中呼叫setTimeout,setInterval或發(fā)送AJAX請求等操作(防止異部操作阻塞UI)。

3)????#componentWillReceiveProps?在元件接收到一個新的 prop (更新後)時被呼叫。這個方法在初始化render時不會被呼叫。

4)????#shouldComponentUpdate?回傳一個布林值。在元件接收到新的props或state時被呼叫。初始化時或使用forceUpdate時不被呼叫。?
可以在你確認(rèn)不需要更新元件時使用。

5)????#componentWillUpdate在元件接收到新的props或state但尚未有render時被呼叫。在初始化時不會被呼叫。

6)????#componentDidUpdate?在元件完成更新後立即呼叫。在初始化時不會被呼叫。

7)????#componentWillUnmount在元件從 DOM 移除的時候立刻被呼叫。

四.React 表單與事件

#實例1：輸入框值變更時我們可以更新state 。我們可以使用 onChange 事件來監(jiān)聽 input 的變化，並修改 state。

五.React Refs

1.使用方法

綁定一個ref 屬性到render 的返回值上：

在它程式碼中，透過this.refs 取得支撐實例:

var input = this.refs.myInput;

#var inputValue = input.value;

var inputRect = input.getBoundingClientRect();

2.實例

子點選按鈕後輸入框取得焦點。

?? v

ar MyComponent = React.createClass({
      handleClick: function() {
        // 使用原生的 DOM API 獲取焦點
        this.refs.myInput.focus();
      },
      render: function() {
        // 當(dāng)組件插入到 DOM 后，ref 屬性添加一個組件的引用于到 this.refs
        return (
          <p>
            <input type="text"ref="myInput" />
            <input
              type="button"
              value="點我輸入框獲取焦點"
              onClick={this.handleClick}
            />
          </p>
        );
      }
    });
 
    ReactDOM.render(
      <MyComponent />,
      document.getElementById(&#39;example&#39;)
    );

這篇文章到這就結(jié)束了（想看更多就到PHP中文網(wǎng)React使用手冊欄位中學(xué)習(xí)），有問題的可以在下方留言提問。

以上是react要怎麼使用？ react的使用情況詳解（內(nèi)附實例）的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！