react中useState怎么使用
這篇文章主要介紹了react中useState怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇react中useState怎么使用文章都會有所收獲，下面我們一起來看看吧。
useState
useState 通過在函數組件里調用它來給組件添加一些內部 state。React 會在重復渲染時保留這個 state。useState
會返回一對值：當前狀態和一個讓你更新它的函數，你可以在事件處理函數中或其他一些地方調用這個函數。它類似 class 組件的
this.setState，但是它不會把新的 state 和舊的 state 進行合并。
接下來通過一個示例來看看怎么使用 useState。
有這么一個需求：需要在 iframe 中加載外部網頁。
初始的代碼我們通過函數式組件來實現這個需求，只需要簡單的渲染一個 iframe：
import?React,?{?useState?}?from?'react';
import?styles?from?'./index.less';
function?Link(props)?{
??const?{?match:?{?params:?{?link?=?''?}?=?{}?}?=?{}?}?=?props;
??const?enCodeUrl?=?decodeURIComponent(link);
??const?url?=?enCodeUrl.startsWith('http')???enCodeUrl?:?`http://${enCodeUrl}`;
??return?(
????<React.Fragment>
????????<iframe
??????????title={link}
??????????src={url}
??????????style={{?width:?'100%',?height:?'100%',?verticalAlign:?'top'?}}
??????????frameBorder="0"
????????/>
????</React.Fragment>
??);
}
export?default?Link;新的需求來了，我們需要給頁面添加一個loading 效果，實現的方式很簡單，監聽 iframe 的 load 事件 來設置loading的開始和結束。
為了實現這個需求，我們需要存放loading的狀態，而函數式組件是沒有自有狀態的，我們得改造成 class 組件：
import?React?from?'react';
import?{?Spin?}?from?'antd';
import?styles?from?'./index.less';
export?default?class?Link?extends?React.Component?{
??state?=?{
????//?存放loading狀態
????iLoading:?true,
??};
??linkLoad()?{
????//?更新loading
????this.setState({?iLoading:?false?});
??}
??render()?{
????const?{?match:?{?params:?{?link?=?''?}?=?{}?}?=?{}?}?=?this.props;
????const?{?iLoading?}?=?this.state;
????const?enCodeUrl?=?decodeURIComponent(link);
????const?url?=?enCodeUrl.startsWith('http')???enCodeUrl?:?`http://${enCodeUrl}`;
????return?(
??????<React.Fragment>
????????<Spin?spinning={iLoading}?wrapperClassName={styles['iframe-loading']}>
??????????<iframe
????????????onLoad={this.linkLoad.bind(this)}
????????????title={link}
????????????src={url}
????????????style={{?width:?'100%',?height:?'100%',?verticalAlign:?'top'?}}
????????????frameBorder="0"
??????????/>
????????</Spin>
??????</React.Fragment>
????);
??}
}為了實現一個頁面的loading，我們需要去使用class，同時還需要bind綁定this等繁瑣行為，這只是一個簡單的需求，而我們卻可以通過hooks來解決這些問題，同時還能解決組件間狀態復用的問題，我們使用useState來實現。
導入?useState
import?React,?{?useState?}?from?'react';
定義狀態
??//?useState?的參數為狀態初始值，setInitLoading為變更狀態值的方法
??const?[initLoading,?setInitLoading]?=?useState(true);
更新狀態
onLoad={()?=>?setInitLoading(false)}
完整代碼如下：
import?React,?{?useState?}?from?'react';
import?{?Spin?}?from?'hzero-ui';
import?styles?from?'./index.less';
function?Link(props)?{
??const?{?match:?{?params:?{?link?=?''?}?=?{}?}?=?{}?}?=?props;
??const?[initLoading,?setInitLoading]?=?useState(true);
??const?enCodeUrl?=?decodeURIComponent(link);
??const?url?=?enCodeUrl.startsWith('http')???enCodeUrl?:?`http://${enCodeUrl}`;
??return?(
????<React.Fragment>
??????<Spin?spinning={initLoading}?wrapperClassName={styles['iframe-loading']}>
????????<iframe
??????????onLoad={()?=>?setInitLoading(false)}
??????????title={link}
??????????src={url}
??????????style={{?width:?'100%',?height:?'100%',?verticalAlign:?'top'?}}
??????????frameBorder="0"
????????/>
??????</Spin>
????</React.Fragment>
??);
}
export?default?Link;下面看看useState注意事項
useState 的參數
useState 的參數可以是基本類型，也可以是對象類型，在更新對象類型時，切記要合并舊的狀態，否則舊的狀態會丟失
const?[params,?setParams]?=?useState({
??rotate:?0,
??color:?"#000000"
});
const?handleInputChange?=?event?=>?{
??const?target?=?event.target;
??setParams({
????...params,
????[target.name]:?target.value
??});
};狀態依賴
如果當前的狀態需要根據最后一次更新的狀態的值計算出來，則給更新狀態的函數傳遞一個函數，此函數的第一個參數即為最后一次更新的值，然后把計算后的結果做為返回值返回出去。
關于“react中useState怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“react中useState怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注蝸牛博客行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：niceseo99@gmail.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
評論