示例详解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
  });
};

状态依赖

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

总结

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

时间: 2021-06-02

详解关于react-redux中的connect用法介绍及原理解析

关于react-redux的一个流程图 流程图 connect用法介绍 connect方法声明: connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options]) 作用:连接React组件与 Redux store. 参数说明: mapStateToProps(state, ownProps) : stateProps 这个函数允许我们将 store 中的数据作为 props 绑定到组件上. const mapSta

详解Python的Twisted框架中reactor事件管理器的用法

铺垫 在大量的实践中,似乎我们总是通过类似的方式来使用异步编程: 监听事件 事件发生执行对应的回调函数 回调完成(可能产生新的事件添加进监听队列) 回到1,监听事件 因此我们将这样的异步模式称为Reactor模式,例如在iOS开发中的Run Loop概念,实际上非常类似于Reactor loop,主线程的Run Loop监听屏幕UI事件,一旦发生UI事件则执行对应的事件处理代码,还可以通过GCD等方式产生事件至主线程执行. 上图是boost对Reactor模式的描绘,Twisted的设计就是基于

详解在React项目中安装并使用Less(用法总结)

less的安装配置 安装react-app-rewired,react-app-rewire-less,babel-plugin-import插件 执行命令: npm install react-app-rewired --save-dev npm install react-app-rewire-less --save-dev npm install babel-plugin-import --save-dev 配置package.json文件 找到scripts属性,修改start的值为re

React教程之Props验证的具体用法(Props Validation)

Props验证对于组件的正确使用是一种非常有用的方式.它可以避免随着你的应用的程序越来越复杂从而出现很多的bug和问题.并且,它还可以是你的程序变得更易读. 那如何对Props进行验证呢,其实很简单,React为我们提供了PropTypes以供验证使用.当我们向Props传入的数据无效(也就是向Props传入的数据类型和验证的数据类型不符)就会在控制台发出警告信息. 看下面的例子 var Propsva = React.createClass({ propTypes: { optionalArr

react-redux中connect的装饰器用法@connect详解

最近在琢磨react中的一些小技巧,这篇文章记录一下在redux中用装饰器来写connect. 通常我们需要一个reducer和一个action,然后使用connect来包裹你的Component.假设你已经有一个key为main的reducer和一个action.js. 我们的App.js一般都这么写: import React from 'react' import {render} from 'react-dom' import {connect} from 'react-redux' i

React-Native中一些常用组件的用法详解(一)

前言 本文为大家介绍一下React-Native中一些常用的组件,由于对ES6的语法并没有完全掌握,这里暂时用ES5和ES6混用的语法. View组件 View是一个支持Flexbox布局.样式.一些触摸处理.和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图. View的设计初衷是和StyleSheet搭配使用,这样可以使代码更清晰并且获得更高的性能.尽管内联样式也同样可以使用. View的常用样式设置 flex布局样式 backgroundColor:背景颜

React-Native中一些常用组件的用法详解(二)

前言 本文为大家介绍一下React-Native中一些深入些的组件,由于对ES6的语法并没有完全掌握,这里暂时用ES5和ES6混用的语法. ScrollView组件 能够调用移动平台的ScrollView(滚动视图)的组件,同时还集成了触摸锁定的"响应者"系统. 注意一定要给scrollview一个高度,或者是他父级的高度. 常用方法 onScrollBeginDrag:开始拖拽的时候; onScrollEndDrag:结束拖拽的时候; onMomentumScrollBegin:开始

JavaScript中SetInterval与setTimeout的用法详解

setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数

Linux中 sed 和 awk的用法详解

sed用法: sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法 sed命令行格式为: sed [-nefri] 'command' 输入文本 常用选项: -n∶使用安静(silent)模式.在一般 sed 的用法中,所有来自 STDIN的资料一般都会被列出到萤幕上.但如果加上 -n 参数后,则只有经过sed 特殊处理的那一行(或者动作)才会被列出来. -e∶直接在指令列模式上进行 sed 的

逻辑表达式中与或非的用法详解

先说逻辑与(&&),它可以从三个层次进行理解 第一个层次最简单,就是简单的布尔值之间的逻辑与,就是左值和右值都是true时,返回true,两边都是false或者两边的值其中一边是fasle,就返回false:(AND操作): 第二个层次,(false,null,indefined,0,-0,NaN和""这些都是假值,其他所有的值包括对象都是真值),对这些"真值"和"假值"进行AND操作,返回一个"真值"或者&q

Vue.js 中的 v-show 指令及用法详解

1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc

.NET Core中Object Pool的多种用法详解

前言 复用,是一个重要的话题,也是我们日常开发中经常遇到的,不可避免的问题. 举个最为简单,大家最为熟悉的例子,数据库连接池,就是复用数据库连接. 那么复用的意义在那里呢? 简单来说就是减少不必要的资源损耗. 除了数据库连接,可能在不同的情景或需求下,还会有很多其他对象需要进行复用,这个时候就会有所谓的 Object Pool(对象池). 小伙伴们应该也自己实现过类似的功能,或用ConcurrentBag,或用ConcurrentQueue,或用其他方案. 这也里分享一个在微软文档中的实现 Ho

Ubuntu常用指令及用法详解

1.ls 这个相当于Windows 下的dir命令,可以列出当前窗口或指定窗口下的内容. 2.rm 这个相当于Windows 下的del 和rmdir 命令,可以删除文件及文件夹. 常见用法:rm -rf/home/ubuntu/.cache (删除 /home/ubuntu/.cache这个文件夹) 禁忌:rm-rf /* 这个命令会删除根分区下所有文件,在某些efi机器上还会删除主板固件,造成主板固件丢失从而无法开机(比操作系统无法启动还严重). 3.chmod 更改文件权限,类似于Wind

JSP 中request与response的用法详解

JSP 中request与response的用法详解 概要: 在学习这两个对象之前,我们应该已经有了http协议的基本了解了,如果不清楚http协议的可以看我的关于http协议的介绍.因为其实request和response的使用大部分都是对http协议的操作. request对象的介绍 我们先从request对象进行介绍: 我们知道http协议定义了请求服务器的格式: 请求行 请求头 空格 请求体(get请求没有请求体) 好了,这里我们就不详细介绍了,我们只看几个应用就可以了,没什么难度: 应

IOS开发中NSURL的基本操作及用法详解

NSURL其实就是我们在浏览器上看到的网站地址,这不就是一个字符串么,为什么还要在写一个NSURL呢,主要是因为网站地址的字符串都比较复杂,包括很多请求参数,这样在请求过程中需要解析出来每个部门,所以封装一个NSURL,操作很方便. 1.URL URL是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它. URL可能包含远程服务器上的资源的位置,本地磁盘上的文件的路径,甚