<td id="aqqih"></td>

<dd id="aqqih"></dd>
  1. <span id="aqqih"></span>
  2. <ol id="aqqih"></ol>

    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進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    評論

    日本韩欧美一级A片在线观看
    <td id="aqqih"></td>

    <dd id="aqqih"></dd>
    1. <span id="aqqih"></span>
    2. <ol id="aqqih"></ol>