Dimples's blog Dimples's blog
首页
  • 前端随笔

    • React
  • 系列文章

    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript》笔记
  • 后端文章

    • Java
    • Python
    • 数据库
  • 学习笔记

    • 《Rust》笔记
    • 《SpringBoot》笔记
    • 《Django》笔记
    • 《Docker》笔记
    • 《Python爬虫》笔记
技术分享
友情链接
索引
关于
GitHub (opens new window)

DimplesY

不会写代码
首页
  • 前端随笔

    • React
  • 系列文章

    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript》笔记
  • 后端文章

    • Java
    • Python
    • 数据库
  • 学习笔记

    • 《Rust》笔记
    • 《SpringBoot》笔记
    • 《Django》笔记
    • 《Docker》笔记
    • 《Python爬虫》笔记
技术分享
友情链接
索引
关于
GitHub (opens new window)
  • React

    • 在React当中使用scss和按需加载antd
    • 使用Redux制作一个TodoList
    • React跨域配置
    • JS 当中的函数柯里化和高阶函数
    • useState的使用
      • React Hook - useSate
        • 使用 useState() 进行状态管理
  • 学习笔记

  • 前端
  • React
DimplesY
2022-03-13

useState的使用

# React Hook - useSate

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

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

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

function example(){
  return <h1>我是一个函数式组件</h1>
}
1
2
3

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

import { useState } from "react";

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

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

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

export default App1;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

帮助我修改此页面 (opens new window)
上次更新: 2022/11/20, 18:28:09
JS 当中的函数柯里化和高阶函数
《ES6 教程》笔记

← JS 当中的函数柯里化和高阶函数 《ES6 教程》笔记→

最近更新
01
使用 strapi 快速构建 API 和 CMS 管理系统
03-03
02
Rust 开发环境
11-26
03
使用 paka.dev 为 npm 包生成文档
11-24
更多文章>
Theme by Vdoing | Copyright © 2020-2025 Dimples YJ | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式