react要怎麼使用？ react的使用情況詳解（內附實例）

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

一.   React Props

  1. 使用props

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

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

2。預設props

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

二.元件API

1.        設定狀態：setState

setState(objectnextState[, function callback])

#（ 1）參數說明:

nextState，將要設定的新狀態，該狀態會和目前的state合併

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

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

（2）關於setStaate

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

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

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

2.        取代狀態：replaceState

replaceState(object nextState[, functioncallback])

nextState，將要設定的新狀態，該狀態會替換目前的state。

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

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

3.        設定屬性：setProps

setProps(object nextProps[, functioncallback])

#nextProps，將要設定的新屬性，該狀態會和目前的props合併

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

設定元件屬性，並重新渲染元件。

4.        取代屬性：replaceProps

replaceProps(object nextProps[, functioncallback])

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

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

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

5.        強制更新：forceUpdate

##forceUpdate([function callback])

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

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

6.        取得DOM節點：findDOMNode

DOMElement findDOMNode()

#返回值：DOM元素DOMElement

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

7.        判斷元件掛載狀態：isMounted

bool isMounted()

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

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

三.React 元件生命週期

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

Mounting：已插入真實DOM

Updating：正在重新渲染

Unmounting：已移出真實DOM

2.生命週期的方法有：

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

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

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

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

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

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

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

四.React 表單與事件

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

五.React Refs

1.使用方法

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

d3bfe32e4194384353a607068085f4c8

在它程式碼中，透過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() {
        // 当组件插入到 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;)
    );

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

以上是react要怎麼使用？ react的使用情況詳解（內附實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！