一文詳解React組件API
常用 React 組件 API：
- 設置狀態(tài)：setState
- 替換狀態(tài)：replaceState
- 設置屬性：setProps
- 替換屬性：replaceProps
- 強制更新：forceUpdate
- 獲取DOM節(jié)點：findDOMNode
- 判斷組件掛載狀態(tài)：isMounted
setState
setState(object nextState[, function callback])
參數(shù)說明
nextState：將要設置的新狀態(tài)，該狀態(tài)會和當前的 state 合并；
callback：可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在 setState 設置成功，且組件重新渲染后調(diào)用。
注意事項
- 不能在組件內(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)了一些條件渲染邏輯。
使用
<!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 (<h2 onClick={this.handleClick}>點我！點擊次數(shù)為: {this.state.count}</h2>);
}
}
ReactDOM.render(
<Counter />,
document.getElementById('example')
);
</script>
</body>
</html>
頁面效果：
注意：
上面例子中，有一句 this.handleClick = this.handleClick.bind(this)。
用 class 來創(chuàng)建 react 組件時，有一件很麻煩的事情，就是this 的指向問題。類的方法默認是不會綁定 this 的，為了保證 this 的指向正確，需要寫這樣的代碼：
this.handleClick = this.handleClick.bind(this)
或者是這樣的代碼：
<button onClick={() => this.handleClick(e)}>
如果忘記綁定 this.handleClick 并把它傳入 onClick，調(diào)用這個函數(shù)的時候 this 的值會是 undefined。
replaceState
replaceState(object nextState[, function callback])
參數(shù)說明
nextState：將要設置的新狀態(tài)，該狀態(tài)會替換當前的 state。
callback：可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在 replaceState 設置成功，且組件重新渲染后調(diào)用。
- replaceState() 方法與 setState() 類似，但是方法只會保留 nextState 中狀態(tài)，原state 不在 nextState 中的狀態(tài)都會被刪除。
setProps
setProps(object nextProps[, function callback])
參數(shù)說明
nextProps：將要設置的新屬性，該狀態(tài)會和當前的 props 合并
callback：可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在 setProps 設置成功，且組件重新渲染后調(diào)用。
設置組件屬性，并重新渲染組件。
- props 相當于組件的數(shù)據(jù)流，它總是會從父組件向下傳遞至所有的子組件中。
- 當和一個外部的 JavaScript 應用集成時，可能會需要向組件傳遞數(shù)據(jù)或通知 React.render() 組件需要重新渲染，可以使用setProps()。
- 更新組件，可以在節(jié)點上再次調(diào)用React.render()，也可以通過setProps() 方法改變組件屬性，觸發(fā)組件重新渲染。
replaceProps
replaceProps(object nextProps[, function callback])
參數(shù)說明
nextProps：將要設置的新屬性，該屬性會替換當前的 props。
callback：可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在 replaceProps 設置成功，且組件重新渲染后調(diào)用。
- replaceProps() 方法與 setProps 類似，但它會刪除原有 props。
forceUpdate
forceUpdate([function callback])
參數(shù)說明
callback：可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在組件render()方法調(diào)用后調(diào)用。
- 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()。
- 一般來說，應該盡量避免使用 forceUpdate()，而僅從 this.props 和 this.state 中讀取狀態(tài)并由 React 觸發(fā) render() 調(diào)用。
findDOMNode
DOMElement findDOMNode()
返回值：DOM 元素 DOMElement
- 如果組件已經(jīng)掛載到 DOM 中，該方法返回對應的本地瀏覽器 DOM 元素。
- 當 render 返回 null 或 false 時，this.findDOMNode() 也會返回 null。從 DOM 中讀取值的時候，該方法很有用，如：獲取表單字段的值和做一些 DOM 操作。
isMounted
bool isMounted()
返回值：true 或 false，表示組件是否已掛載到 DOM 中
- isMounted() 方法用于判斷組件是否已掛載到 DOM 中?？梢允褂迷摲椒ūＷCsetState() 和 forceUpdate() 在異步場景下的調(diào)用不會出錯。
到此這篇關于一文詳解React組件API的文章就介紹到這了,更多相關React組件API內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
解決React報錯Property does not exist on
這篇文章主要為大家介紹了React報錯Property does not exist on type 'JSX.IntrinsicElements'解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine設置默認容器詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
Hook是React16.8的新增特性。它可以讓你在不編寫class的情況下使用state以及其他的React特性，這篇文章主要介紹了React hook的使用2022-10-10
這篇文章主要介紹了react diff算法源碼解析的相關資料，幫助大家更好的理解和學習使用react，感興趣的朋友可以了解下2021-04-04
Remix后臺開發(fā)之remix-antd-admin配置過程
這篇文章主要為大家介紹了Remix后臺開發(fā)之remix-antd-admin配置過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
很多小伙伴在第一次嘗試封裝組件時會和我一樣碰到許多問題，本文主要介紹了基于React封裝組件的實現(xiàn)步驟，感興趣的可以了解一下2021-11-11
React Hooks - useContetx和useReducer的使用實例詳解
這篇文章主要介紹了React Hooks - useContetx和useReducer的基本使用,本文通過實例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Javascript React基礎，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的同學可以參考一下2019-06-06
這篇文章主要介紹了使用reactjs優(yōu)化了進度條后頁面性能提高了70%的操作技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
react-router-dom6(對比?router5)快速入門指南
這篇文章主要介紹了快速上手react-router-dom6（對比?router5）,通過本文學習最新的react-router-dom?v6版本的路由知識，并且會與v5老版本進行一些對比，需要的朋友可以參考下2022-08-08