这篇文章主要介绍了react中useState怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇react中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 的参数可以是基本类型，也可以是对象类型，在更新对象类型时，切记要合并旧的状态，否则旧的状态会丢失
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怎么使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://www.zhuxianfei.com/jishu/js/47918.html
