前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >useState的使用

useState的使用

作者头像
小小杰啊
发布2022-12-21 21:37:01
5820
发布2022-12-21 21:37:01
举报
文章被收录于专栏:Dimples开发记Dimples开发记

# React Hook - useSate

在 React 的函数式组件当中,是没有状态的,但是使用 React 提供的 Hook 可以让函数式组件拥有状态。

# 使用 useState() 进行状态管理

无状态的函数组件没有状态,如下代码所示:

代码语言:javascript
复制
function example(){
  return <h1>我是一个函数式组件</h1>
}

如果需要给这个组件添加一个状态,就需要用到 React 提供的 useSate() 这个 Hook,它的使用方式如下:

代码语言:javascript
复制
import { useState } from "react";

function App1() {
  const [msg, setState] = useState("Hello React");

  const fn = () => {
    setState("测试");
  };

  return (
    <>
      <h1 onClick={fn}>{msg},你好</h1>
    </>
  );
}

export default App1;

使用 useState() 可以在函数式组件当中声明状态,useState 函数的返回值是一个数组,数组的第一个位置就是声明的状态的值,第二个位置为一个函数,使用该函数能够对声明的状态进行改变,直接改变状态页面是没办法更新的。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-03-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • # React Hook - useSate
    • # 使用 useState() 进行状态管理
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档