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><iframetitle={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() {// 更新loadingthis.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']}><iframeonLoad={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']}><iframeonLoad={() => setInitLoading(false)}title={link}src={url}style={{ width: '100%', height: '100%', verticalAlign: 'top' }}frameBorder="0"/></Spin></React.Fragment>);
}export default Link;

react的useState的用法相关推荐

React 中 useState 清理的必须性
React 中 useState 清理的必须性最近踩到了一个坑,属于以前没有碰到过的问题,就是在本地测试的时候,docker 的 API 不知道为什么突然有了延迟,以至于在状态更新的时候,之前调用的 ...
react 之 useState
参考:https://blog.csdn.net/Ljwen_/article/details/125319191 一.基本使用 useState是 react 提供的一个定义响应式变量的 hook ...
React简介及基础用法
1.React简介 1.1.React概述 React 是用于构建用户界面的 javascript 库,具有声明式.组件化等特点. 1.2.MVC和MVVM模式 MVC(Model-View-Cont ...
【React Native】react-native-vector-icons用法避坑
在用React Native开发App时,icon的使用必不可少.官网推荐使用react-native-vector-icons来完成icon的使用. 在学习的过程中碰到了一个问题:一步一步按照官网说 ...
【React学习】React中ref的用法
ref可以让react方便快捷地拿到DOM元素,ref的用法主要有两种. 用法1:回调形式的ref 在ref中传入一个回调函数,回调函数的默认参数就是元素对象,给组件加一个属性用来存储元素对象. &l ...
React hooks useState如何拿到更新后的值
在class中,如果我们想要拿到setState 最新的值,去调用api,直接通过this.setState的回调函数就可以了 this.setState({latestValue: "我 ...
React——浅析useState原理
在讲解之前我们先回忆下闭包,什么是闭包呢? 闭包是一个特殊的对象它由两部分组成,执行上下文A以及在A中创建的函数B. 当B执行时,如果访问了A中的变量对象,那么闭包就会产生. 这里有一篇文档对闭包有 ...
React中 useState在合成事件中是异步的，怎么获取到useState 设置后的最新值，或者说setState中获取到最新值
useState 在合成事件中是异步的合成时间是什么呢合成事件: 简单来说比如onClick,或者 onChange 或者说是 Input之类的事件所以一个情景是这样的当你在onClick ...
react.js 从零开始（五）React 中事件的用法
事件系统虚拟事件对象事件处理器将会传入虚拟事件对象的实例,一个对浏览器本地事件的跨浏览器封装.它有和浏览器本地事件相同的属性和方法,包括 stopPropagation() 和 preventDe ...

react的useState的用法

useState

react的useState的用法相关推荐

最新文章

热门文章