react（17）——useState钩子函数的用法清晰讲解

最新推荐文章于 2024-05-28 15:43:46 发布
最新推荐文章于 2024-05-28 15:43:46 发布
阅读量1.2k 收藏 2
点赞数 1
分类专栏： # react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45895576/article/details/113093631
版权

代码

const [something, setSomething] = useState(false)

讲解

  1. 为什么要用这个钩子函数，因为函数组件无法像对象式组件那样使用state，需要通过钩子才能使用。
  2. useState方法是一个react自带的钩子函数；
  3. something是由useState函数新创建的一个State；
  4. useState方法的参数作为新的State（也就是something）的值；
  5. setSomething是一个函数，用于以后更新这个State；例如：
setSomething(true);//将something这个State更新为true
  1. useState方法会导致重新渲染；
木子 旭
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
随时记|React Hooks
weixin_49179577的博客
02-24 254
React的Hooks有useState、 useEffect、useRef useState 例如： const [isShow, changeIsShow] = useState(false); isShow:是否展示（一个状态） changeIsShow:改变是否展示（改变状态的唯一方法） false:默认值 useState的唯一参数：该状态的默认值 useEffect 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子) 发ajax请求数据获取 设置订阅 / 启动.
从原理上解读useState钩子函数
Always-Learning
10-16 481
原生useState具有的几个特点 返回一个数组，数组的第一个参数值是状态值，第二个参数值是设置状态的方法。 useState会判断传入的state是初始值还是已存在的值。 useState可能被多次调用 调用设置状态的方法后需要重新渲染组件。 手写useState 第一步：用不同的数组来分别存放状态值和设置状态的方法 let states = []; let setters = []; let stateId = 0; 第二步：判断useState传入的初始状态值是否已经存在 存在用以前的，不存在
ahooks 的 useClickAway 在 React 17 中不工作了
fe_watermelon的博客
06-18 371
最近公司的前端项目从 React 16 升级到了 React 17，导致 ahooks 的 useClickAway 不能按预期工作。下面西瓜哥我就来说说到底发生了什么事。ahooks 是阿里巴巴维护的第三方 React Hook 库，里面封装了很多好用的 hook。比如经常用到的组件挂载以及卸载的 useMount、useUnmount，还有支持自动请求、手动请求、防抖等各种功能请求 useRequest，以及可以将状态同步存取到 localStorage 的 useLocalStorageState。当
react 新版本 生命周期 钩子函数
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
04-27 1598
和旧的生命周期相比 废弃了三个钩子，新增了两个钩子 getDerivedStateFromProps 、getSnapshotBeforeUpdate
react useState基本使用
最新发布
工作的日常记录和平凡的生活分享
05-28 1036
React Hooks是React 16.8版本引入的新特性，它允许在不编写类的情况下使用state和其他React特性。Hooks的引入极大地简化了组件的编写，使得函数式组件能够拥有类似类组件的功能。
react钩子_usestate钩子的几种状态在React
weixin_26720549的博客
10-15 683
react钩子Hooks have changed the way we write React components. It encourages a much more functional and composable style of coding that was difficult to achieve with class components. One of the biggest...
简单易懂的 React useState() Hook 指南
油墨香^-^的博客
08-02 720
要使函数组件有状态，请在组件的函数体中调用useState()。的第一个参数是初始状态。返回的数组有两项当前状态和状态更新函数。使用来更新状态值。另外，如果需要根据先前的状态更新状态，可以使用回调函数。在单个组件中可以有多个状态调用多次useState()。当初始状态开销很大时，延迟初始化很方便。使用计算初始状态的回调调用，并且此回调仅在初始渲染时执行一次。必须确保使用useState()遵循Hook规则。当闭包捕获过时的状态变量时，就会出现过时状态的问题。useState()hook。...
React 16源码解读：useState钩子实例的队列
海风的博客
03-09 89
dispatchAction方法：向队列中添加更新记录ReactFiberHooks.js文件 useReducer方法：处理队列，并删除更新记录。
点击：简单的React useState钩子示例
02-22
这个“点击：简单的React useState钩子示例”项目正是为了帮助开发者理解如何在函数组件中有效地使用`useState`。 在JavaScript环境中，React组件分为两种类型：类组件和函数组件。类组件通过`this.state`来管理...
react pro——————————
04-14
react pro——————————
react v6路由钩子函数
12-12
本篇文章将详细探讨React Router V6中的关键路由钩子函数及其用法。 首先，最重要的两个路由钩子是`useHistory`和`useLocation`。在React Router V5中，我们通常会使用这两个来管理路由状态和导航。然而，在V6中，...
react-useStateRef:useRef和UseState在一起！
05-03
如何使用安装$ npm i react-usestateref import useState from 'react-usestateref'function MyComponent ( ) { var [ state , setState , ref ] = useState ( 0 ) // ref.current will always have the latest ...
React-simple-crud:Crud React utilizando钩子useState
05-27
Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误...
React 基础 - 12 （函数组件hook的使用：state状态、生命周期）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-15 368
rfc 函数组件 16.8版本 Hook特性，其中就包含了state、生命周期....... rcc 类组件功能更完善 state 组件生命周期 state状态： 1、引入：import { useState } from "react"; 2、声明、使用：const [num, setNum] = useState(1) useState拥有了state、setState方法 参数1：状态的名称key，rcc中的state={key:value} ...
react Hooks useState使用方法
weixin_45760365的博客
09-15 254
react Hooks useState 使用方法 1.引入 import React, { useState } from 'react'; 2.定义 const [data, setData] = useState(false); 3.改变参数 setData(true) useState 与setState的区别： setState在类组件中拥有this指向，在使用this.setState({})方法改变参数，页面数据重新渲染， 但是在函数中没有this指向，当我们需要改变页面上面数据的时候
React全局状态管理（state）之Context的使用方法
lxyoucan的博客
09-16 2760
状态之间传递，一般由父组件向下传递给子组件。如果有的状态是全局都要用的话，这样专递就太麻烦了。 谈到全局状态管理，不得不说Redux，很有名气，个人认为比较适合大型项目开发。 没做过什么超大项目的我。个人观点，Redux总感觉不舒心不直接。感觉做个简单的事情绕来绕去的。后来发现用React提供的Context 挺简单方便的，够我用。状态我想改就改。 官方文档 Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。 ht...
react的useState的用法
楠姐的博客
09-21 3万+
useState
react使用usestate踩坑
热门推荐
秋来九月八
04-22 3万+
usestate的常规用法 在react框架中，不适用类组件，使用函数式组件又想自定义数据维护业务开发的时候，就需要使用react提供的hook来完成。usestate就是最常见的一种hook。 const [name,setName] = useState('dx'); setName（'dx1'） 中括号实际是一个解构运算，第一个name是设置的值，第二个setName是只能用来改变name...
【React全解3】React.useState原理详解，一次性搞懂useState
qq_44906900的博客
12-14 1万+
目录 useState简介 useState的简单使用 手写实现useState 总结 参考 一、useState 简介 返回一个有状态值和一个函数来更新它。在初始渲染期间，返回的状态（状态）与作为第一个参数（initialState）传递的值相同。setState 函数用于更新状态。它接受一个新的状态值，并排队等待重新渲染该组件。 在后续重新渲染期间，useState 返回的第一个值将始终是应用更新后的最新状态。 注意： React 保证 setState 函数身份是稳定的，并且在重新渲染时
React函数组件的useState 用法
06-08
React函数组件的useState用法是用来创建和管理组件内部状态的。useState是React提供的一个钩子函数，用于在函数组件中添加状态。使用方式如下： 1. 导入useState函数：import React, { useState } from 'react'; 2. 创建状态变量：const [state, setState] = useState(initialState); 其中，state是状态变量名，initialState是初始状态值，setState是更新状态变量的函数。 3. 调用状态变量：在函数组件中可以直接使用state变量来获取当前状态的值。 4. 更新状态变量：通过调用setState函数来更新状态变量的值，例如：setState(newValue)。 需要注意的是，useState函数返回一个数组，第一个元素是状态变量，第二个元素是更新状态变量的函数。在更新状态变量时，React会重新渲染组件，并将新的状态值传递给组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木子 旭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值