本篇文章主要的介紹了關於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. 判斷元件掛載狀態：isMountedbool 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 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('example')
);這篇文章到這就結束了（想看更多就到PHP中文網React使用手冊欄位中學習），有問題的可以在下方留言提問。
以上是react要怎麼使用？ react的使用情況詳解（內附實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
