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

一.?? React Props

? 1. 使用props

state 和 props 主要的區(qū)別在于 props 是不可變的，而 state 可以根據(jù)與用戶交互來改變。這就是為什么有些容器組件需要定義 state 來更新和修改數(shù)據(jù)。而子組件只能通過 props 來傳遞數(shù)據(jù)。

實例中 name 屬性通過this.props.name 來獲取。

2。默認props

你可以通過getDefaultProps() 方法為 props 設置默認值。

二.組件API

1.????????設置狀態(tài)：setState

setState(objectnextState[, function callback])

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

nextState，將要設置的新狀態(tài)，該狀態(tài)會和當前的state合并

callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在setState設置成功，且組件重新渲染后調(diào)用。

合并nextState和當前state，并重新渲染組件。setState是React事件處理函數(shù)中和請求回調(diào)函數(shù)中觸發(fā)UI更新的主要方法。

（2）關于setStaate

不能在組件內(nèi)部通過this.state修改狀態(tài)，因為該狀態(tài)會在調(diào)用setState()后被替換。

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

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

2.????????替換狀態(tài)：replaceState

replaceState(object nextState[, functioncallback])

nextState，將要設置的新狀態(tài)，該狀態(tài)會替換當前的state。

callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在replaceState設置成功，且組件重新渲染后調(diào)用。

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

3.????????設置屬性：setProps

setProps(object nextProps[, functioncallback])

nextProps，將要設置的新屬性，該狀態(tài)會和當前的props合并

callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在setProps設置成功，且組件重新渲染后調(diào)用。

設置組件屬性，并重新渲染組件。

4.????????替換屬性：replaceProps

replaceProps(object nextProps[, functioncallback])

nextProps，將要設置的新屬性，該屬性會替換當前的props。

callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在replaceProps設置成功，且組件重新渲染后調(diào)用。

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

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

forceUpdate([function callback])

?forceUpdate()方法會使組件調(diào)用自身的render()方法重新渲染組件，組件的子組件也會調(diào)用自己的render()。但是，組件重新渲染時，依然會讀取this.props和this.state，如果狀態(tài)沒有改變，那么React只會更新DOM。

forceUpdate()方法適用于this.props和this.state之外的組件重繪（如：修改了this.state后），通過該方法通知React需要調(diào)用render()

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

DOMElement findDOMNode()

返回值：DOM元素DOMElement

如果組件已經(jīng)掛載到DOM中，該方法返回對應的本地瀏覽器 DOM 元素。當render返回null 或 false時，this.findDOMNode()也會返回null。從DOM 中讀取值的時候，該方法很有用，如：獲取表單字段的值和做一些 DOM 操作。

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

bool isMounted()

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

isMounted()方法用于判斷組件是否已掛載到DOM中?？梢允褂迷摲椒ūＷC了setState()和forceUpdate()在異步場景下的調(diào)用不會出錯。

三.React 組件生命周期

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

Mounting：已插入真實 DOM

Updating：正在被重新渲染

Unmounting：已移出真實 DOM

2.生命周期的方法有：

1)????componentWillMount?在渲染前調(diào)用,在客戶端也在服務端。

2)????componentDidMount?: 在第一次渲染后調(diào)用，只在客戶端。之后組件已經(jīng)生成了對應的DOM結構，可以通過this.getDOMNode()來進行訪問。如果你想和其他JavaScript框架一起使用，可以在這個方法中調(diào)用setTimeout,setInterval或者發(fā)送AJAX請求等操作(防止異部操作阻塞UI)。

3)????componentWillReceiveProps?在組件接收到一個新的 prop (更新后)時被調(diào)用。這個方法在初始化render時不會被調(diào)用。

4)????shouldComponentUpdate?返回一個布爾值。在組件接收到新的props或者state時被調(diào)用。在初始化時或者使用forceUpdate時不被調(diào)用。?
可以在你確認不需要更新組件時使用。

5)????componentWillUpdate在組件接收到新的props或者state但還沒有render時被調(diào)用。在初始化時不會被調(diào)用。

6)????componentDidUpdate?在組件完成更新后立即調(diào)用。在初始化時不會被調(diào)用。

7)????componentWillUnmount在組件從 DOM 中移除的時候立刻被調(diào)用。

四.React 表單與事件

實例1：在輸入框值發(fā)生變化時我們可以更新 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() {
        // 當組件插入到 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中文網(wǎng)React使用手冊欄目中學習），有問題的可以在下方留言提問。

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