脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react useState用法

示例详解react中useState的用法

 更新时间：2021年06月04日 12:01:53   作者：大莲芒  
useState 通过在函数组件里调用它来给组件添加一些内部 state，React 会在重复渲染时保留这个 state，接下来通过一个示例来看看怎么使用 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
  });
};

状态依赖

如果当前的状态需要根据最后一次更新的状态的值计算出来，则给更新状态的函数传递一个函数，此函数的第一个参数即为最后一次更新的值，然后把计算后的结果做为返回值返回出去。

总结

利用 useState hook 可以让函数式组件拥有状态管理特性，它与传统的 class 组件的状态管理类似，但是更加简洁，不用频繁的使用 this。在后面的文章中将会介绍到如何结合其他的 hooks 对业务逻辑进行抽离以使组件代码和 hooks 代码各司其职。

您可能感兴趣的文章:

相关文章

  • React hooks使用方法全面汇总

    React hooks使用方法全面汇总

    这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch函数如何与其使用的Function Component进行绑定，实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-10-10
  • React路由中的redux和redux知识点拓展

    React路由中的redux和redux知识点拓展

    这篇文章主要介绍了React路由中的redux和redux知识点拓展，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的朋友可以参考学习一下
    2022-08-08
  • react实现动态表单

    react实现动态表单

    这篇文章主要为大家详细介绍了react实现动态表单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • React重新渲染超详细讲解

    React重新渲染超详细讲解

    什么是re-render（重新渲染）？哪些是必要的re-render？哪些是非必要的re-render？如果你对这些问题还不是很明白，那么可以在这篇文章中找到答案
    2022-11-11
  • 详细分析React 表单与事件

    详细分析React 表单与事件

    这篇文章主要介绍了React 表单与事件的相关资料，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-07-07
  • React实现全局组件的Toast轻提示效果

    React实现全局组件的Toast轻提示效果

    这篇文章主要介绍了React实现全局组件的Toast轻提示效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 基于React实现搜索GitHub用户功能

    基于React实现搜索GitHub用户功能

    在本篇博客中,我们将介绍如何在 React 应用中搜索 GitHub 用户并显示他们的信息,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02
  • React文件名和目录规范最佳实践记录(总结篇)

    React文件名和目录规范最佳实践记录(总结篇)

    React在使用时非常灵活，如果没有一个规范约束项目，在开发过程中会非常混乱，本文将介绍几个优秀的规范，介绍文件名和目录前，需要先简述一下几种通用的类型，用来区分文件的功能，感兴趣的朋友一起看看吧
    2022-05-05
  • ReactNative实现的横向滑动条效果

    ReactNative实现的横向滑动条效果

    本文介绍了ReactNative实现的横向滑动条效果,本文结合示例代码给大家介绍的非常详细,补充介绍了ReactNative基于宽度变化实现的动画效果,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • React 数据获取条件竞争原理解析

    React 数据获取条件竞争原理解析

    这篇文章主要为大家介绍了React 数据获取条件竞争原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01

最新评论