快捷導(dǎo)航

示例詳解react中useState的用法

更新時(shí)間：2021年06月04日 12:01:53 作者：大蓮芒

useState 通過在函數(shù)組件里調(diào)用它來給組件添加一些內(nèi)部 state，React 會(huì)在重復(fù)渲染時(shí)保留這個(gè) state，接下來通過一個(gè)示例來看看怎么使用 useState吧

useState

useState 通過在函數(shù)組件里調(diào)用它來給組件添加一些內(nèi)部 state。React 會(huì)在重復(fù)渲染時(shí)保留這個(gè) state。useState
會(huì)返回一對(duì)值：當(dāng)前狀態(tài)和一個(gè)讓你更新它的函數(shù)，你可以在事件處理函數(shù)中或其他一些地方調(diào)用這個(gè)函數(shù)。它類似 class 組件的
this.setState，但是它不會(huì)把新的 state 和舊的 state 進(jìn)行合并。

接下來通過一個(gè)示例來看看怎么使用 useState。

有這么一個(gè)需求：需要在 iframe 中加載外部網(wǎng)頁(yè)。

初始的代碼我們通過 函數(shù)式組件 來實(shí)現(xiàn)這個(gè)需求，只需要簡(jiǎn)單的渲染一個(gè) 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;

新的需求來了，我們需要給頁(yè)面添加一個(gè) loading 效果，實(shí)現(xiàn)的方式很簡(jiǎn)單，監(jiān)聽 iframe 的 load 事件來設(shè)置loading的開始和結(jié)束。

為了實(shí)現(xiàn)這個(gè)需求，我們需要存放loading的狀態(tài)，而函數(shù)式組件是沒有自有狀態(tài)的，我們得改造成 class 組件：

import React from 'react';
import { Spin } from 'antd';

import styles from './index.less';

export default class Link extends React.Component {
  state = {
    // 存放loading狀態(tài)
    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>
    );
  }
}

為了實(shí)現(xiàn)一個(gè)頁(yè)面的loading，我們需要去使用class，同時(shí)還需要bind綁定this等繁瑣行為，這只是一個(gè)簡(jiǎn)單的需求，而我們卻可以通過hooks來解決這些問題，同時(shí)還能解決組件間狀態(tài)復(fù)用的問題，我們使用useState來實(shí)現(xiàn)。

導(dǎo)入 useState
import React, { useState } from 'react';
定義狀態(tài)
  // useState 的參數(shù)為狀態(tài)初始值，setInitLoading為變更狀態(tài)值的方法
  const [initLoading, setInitLoading] = useState(true);
更新狀態(tài)
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注意事項(xiàng)

useState 的參數(shù)

useState 的參數(shù)可以是基本類型，也可以是對(duì)象類型，在更新對(duì)象類型時(shí)，切記要合并舊的狀態(tài)，否則舊的狀態(tài)會(huì)丟失

const [params, setParams] = useState({
  rotate: 0,
  color: "#000000"
});

const handleInputChange = event => {
  const target = event.target;
  setParams({
    ...params,
    [target.name]: target.value
  });
};

狀態(tài)依賴

如果當(dāng)前的狀態(tài)需要根據(jù)最后一次更新的狀態(tài)的值計(jì)算出來，則給更新狀態(tài)的函數(shù)傳遞一個(gè)函數(shù)，此函數(shù)的第一個(gè)參數(shù)即為最后一次更新的值，然后把計(jì)算后的結(jié)果做為返回值返回出去。

總結(jié)

利用 useState hook 可以讓函數(shù)式組件擁有狀態(tài)管理特性，它與傳統(tǒng)的 class 組件的狀態(tài)管理類似，但是更加簡(jiǎn)潔，不用頻繁的使用 this。在后面的文章中將會(huì)介紹到如何結(jié)合其他的 hooks 對(duì)業(yè)務(wù)邏輯進(jìn)行抽離以使組件代碼和 hooks 代碼各司其職。

您可能感興趣的文章: