溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下React組件API怎么使用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
setState(object nextState[, function callback])
nextState：將要設置的新狀態，該狀態會和當前的 state 合并；
callback：可選參數，回調函數。該函數會在 setState 設置成功，且組件重新渲染后調用。
不能在組件內部通過 this.state 修改狀態，因為該狀態會在調用 setState() 后被替換。
setState() 并不會立即改變 this.state，而是創建一個即將處理的 state。setState()并不一定是同步的，為了提升性能 React 會批量執行 state 和 DOM 渲染。
setState() 總是會觸發一次組件重繪，除非在 shouldComponentUpdate() 中實現了一些條件渲染邏輯。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React demo</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> class Counter extends React.Component{ constructor(props) { super(props); this.state = {count: 0}; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState((state) =>{ return {count: state.count + 1}; }); } render () { return (<h3 onClick={this.handleClick}>點我！點擊次數為: {this.state.count}</h3>); } } ReactDOM.render( <Counter />, document.getElementById('example') ); </script> </body> </html>
頁面效果：
注意：
上面例子中，有一句 this.handleClick = this.handleClick.bind(this)。
用 class 來創建 react 組件時，有一件很麻煩的事情，就是this 的指向問題。類的方法默認是不會綁定 this 的，為了保證 this 的指向正確，需要寫這樣的代碼：
this.handleClick = this.handleClick.bind(this)
或者是這樣的代碼：
<button onClick={() => this.handleClick(e)}>如果忘記綁定 this.handleClick 并把它傳入 onClick，調用這個函數的時候 this 的值會是 undefined。
replaceState(object nextState[, function callback])
nextState：將要設置的新狀態，該狀態會替換當前的 state。
callback：可選參數，回調函數。該函數會在 replaceState 設置成功，且組件重新渲染后調用。
replaceState() 方法與 setState() 類似，但是方法只會保留 nextState 中狀態，原state 不在 nextState 中的狀態都會被刪除。
setProps(object nextProps[, function callback])
nextProps：將要設置的新屬性，該狀態會和當前的 props 合并
callback：可選參數，回調函數。該函數會在 setProps 設置成功，且組件重新渲染后調用。
設置組件屬性，并重新渲染組件。
props 相當于組件的數據流，它總是會從父組件向下傳遞至所有的子組件中。
當和一個外部的 JavaScript 應用集成時，可能會需要向組件傳遞數據或通知 React.render() 組件需要重新渲染，可以使用setProps()。
更新組件，可以在節點上再次調用React.render()，也可以通過setProps() 方法改變組件屬性，觸發組件重新渲染。
replaceProps(object nextProps[, function callback])
nextProps：將要設置的新屬性，該屬性會替換當前的 props。
callback：可選參數，回調函數。該函數會在 replaceProps 設置成功，且組件重新渲染后調用。
replaceProps() 方法與 setProps 類似，但它會刪除原有 props。
forceUpdate([function callback])
callback：可選參數，回調函數。該函數會在組件render()方法調用后調用。
forceUpdate() 方法會使組件調用自身的 render() 方法重新渲染組件，組件的子組件也會調用自己的 render()。但是，組件重新渲染時，依然會讀取 this.props 和this.state，如果狀態沒有改變，那么React 只會更新 DOM。
forceUpdate()方法適用于 this.props 和 this.state 之外的組件重繪（如：修改了this.state 后），通過該方法通知 React 需要調用 render()。
一般來說，應該盡量避免使用 forceUpdate()，而僅從 this.props 和 this.state 中讀取狀態并由 React 觸發 render() 調用。
DOMElement findDOMNode()
返回值：DOM 元素 DOMElement
如果組件已經掛載到 DOM 中，該方法返回對應的本地瀏覽器 DOM 元素。
當 render 返回 null 或 false 時，this.findDOMNode() 也會返回 null。從 DOM 中讀取值的時候，該方法很有用，如：獲取表單字段的值和做一些 DOM 操作。
bool isMounted()
返回值：true 或 false，表示組件是否已掛載到 DOM 中
isMounted() 方法用于判斷組件是否已掛載到 DOM 中。可以使用該方法保證setState() 和 forceUpdate() 在異步場景下的調用不會出錯。
以上就是“React組件API怎么使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
