React：useState基础使用

最新推荐文章于 2024-08-22 17:30:50 发布
最新推荐文章于 2024-08-22 17:30:50 发布
阅读量120 收藏
点赞数 2
文章标签： javascript React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/140678917
版权

介绍

https://zh-hans.react.dev/reference/react/useState

useState 是一个 React Hook（函数），它允许你向组件添加一个 状态变量，从而控制影响组件的渲染结果。

本质：和普通javascript变量不同的是，状态变量一旦发生变化，组件的视图UI也会跟着变化，即所谓的数据驱动视图。而useState 就是创建这种特殊的状态变量的函数。

如：
在这里插入图片描述
其中:

  1. useState 是一个函数，返回值是一个数组。
  2. 数组中的第一个参数是状态变量；第二个参数是set函数，用来修改状态变量。
  3. useState 的参数将作为state的初始值。

示例：点击按钮实现自增

在这里插入图片描述

在这里插入图片描述

按钮每点击一次，就增加1：
在这里插入图片描述

在这里插入图片描述

听海边涛声
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
精读React hooks（一）：useState 的几个基础用法和进阶技巧
BigYe_ChengPu的博客
12-11 1100
自从 React v16.8 版本以来，React Hooks 为我们提供了全新的编写和思考 React 组件的方式。这是本系列文章第一篇，我们将探讨最常用的 hook——useState。
用动画和实战打开 React Hooks（一）：useState 和 useEffect
图雀社区
04-25 1668
我们研发开源了一款基于 Git 进行技术实战教程写作的工具，我们图雀社区的所有教程都是用这款工具写作而成，欢迎 Star 哦 如果你想快速了解如何使用，欢迎阅读我们的 教程文档 哦 本文由图雀社区成员 mRc 写作而成，欢迎加入图雀社区，一起创作精彩的免费技术教程，予力编程行业发展。 如果您觉得我们写得还不错，记得 点赞 + 关注 + 评论 三连，鼓励我们写出更好的教程???? 自从...
useState第二个参数的“第二个参数”
wheresmyteammate的博客
08-04 8364
useState第二个参数的“第二个参数”场景引入类式组件参数传递回调函数setState完成后执行的回调函数参数传递回调函数_promise版函数式组件参数传递回调函数利用useEffect监听count的变化async_await总结 场景引入 在学习react的过程中，为了希望能使用hook养成写函数式组件的习惯，我在完成日常作业的过程中刻意的使用hook，但也发现了几个两类组件里需要注意的问题。 先上一个需求场景： 当我们在类式组件中连续调用setState时，因为setState方法是异步的，所
react hook中的useState的第二个参数是异步的
菜鸟的博客
01-23 6785
useState的异步更新 const [list, setlist] = useState([0]); function change(){ setlist([22, 1]) console.log(list) //我想这里直接获得[22,1]，但是拿到的是[0] } useState每次执行会返回一个新的state（简单类型的等值拷贝） setState会触发UI更新（重新render，执行函数组件） 由于UI更新是异步任务，所以setState也是一个异步过程 解决方
自定义useState
车联网开发的博客
11-25 493
1.useState import React, { useState} from 'react' // 1.useState export default function App() { const [state, setState] = useState({num:1}); return( <div> <p>{state.num}</p> <button onClick={
React-hooks中useState自定义实现原理
weixin_42367138的博客
08-09 435
useState自定义实现原理
useState使用规则
m0_72865135的博客
08-08 439
以上提到的这些规则，同样也适用于任意的 React Hooks 函数。
React Hook基础入门：useState 和 useEffect 使用指南
React Hook 是一种在函数组件中使用状态和副作用的新方法。它于 React 16.8 版本引入，为开发者提供了更简洁、清晰的代码编写方式。本章将介绍 React Hook 的基本概念、使用场景以及与传统类组件的对比。 ### 1.1 ...
React:React基础课程
05-28
5. 虚拟DOM：React使用虚拟DOM来提高性能。当组件状态改变时，React会先创建一个新的虚拟DOM树，然后通过比较新旧树的差异（称为“diff”过程），只更新实际DOM中必要的部分，而不是整个页面，从而减少不必要的DOM...
React源码分析(三)：useState，useReducer
It_kc的博客
09-27 365
总结下useState初始化和setStateuseState会在第一次执行函数组件时进行初始化，返回。当我们通过setState也就是进行调度更新时，会创建一个update加入到hook.queue中。当更新过程中再次执行函数组件，也会调用useState方法，此时的useState内部会使用更新时的hooks。通过获取到创建的update。在通过遍历update链表完成setState合并。返回update后的.
React Hooks API 之 useState
YoungMan_09的博客
02-12 458
React Hooks 之 useState的用法
React-useState
qq_35260673的博客
06-07 594
讲述了useState的用法，set函数的注意事项和使用useState的相关问题
[react] hooks基础 =＞ useState ===
weixin_58726419的博客
11-11 939
hooks是什么？ Hooks：钩子、钓钩、钩住。 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 作用： 为函数组件提供状态、生命周期等原本 在Class 组件中才提供的功能 Hooks 只能在函数组件中使用 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性 Hooks 前后，组件开发模式的对比
React小案例： 点击按钮，数字加1
tuzi007a的博客
08-30 2431
大家好，我是梅巴哥er，本次案例较为简单，但是有个核心思想，就是要拿到数字这个值，要想到用e.target.value。 代码如下： import React, { Component } from 'react' export default class App extends Component { constructor(props) { super(props) this.state = { num: 1 }
React关于自增操作的问题
m0_50863901的博客
11-20 637
React关于自增操作
react实现动态递增展示数字特效
zhoupenghui168的博客
09-19 1723
在可视化展示界面时有一种场景，就是页面在初始化的时候，有些数字展示想要从某个值开始动态递增到实际值，形成一种动画效果,一个React组件：动态递增展示数字特效, 使用react-countup组件实现动态效果
react按钮点击自增
Software's Blog
02-08 313
react按钮点击自增
【前端面试】看react源码，解读useState
最新发布
hhhh
08-22 976
mount 阶段获取当前 Hook 节点，同时将当前 Hook 添加到 Hook 链表中初始化 Hook 的状态，即读取初始 state 值创建一个新的链表作为更新队列，用来存放更新操作setXxx()，赋值给Hook.queue创建一个 dispatch 方法（即 useState 返回的数组的第二个参数：setXxx()），该方法的用途是用来修改state，赋值给queue.dispatch返回当前 state 和 修改state 的方法（dispatch）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值