React Hook中的useState函数的详细解析

useState => 让函数组件具有维持状态的能力
useState 这个 Hook 是用来管理 state 的，它可以让函数组件具有维持状态的能力。即在一个函数组件的多次渲染之间，这个 state 是共享的。

Hooks 的最大的作用就是可以让你在不编写class的情况下使用state以及其他的 React 特性

useState的详细解析

在上一篇文章中, 我用到useState来让大家体验一下hooks函数

import { memo, useState } from "react"

const Counter2 = memo(() => {
  const [counter, setCounter] = useState(100)

  return (
    <div>
      <h2>当前计数: {counter}</h2>
      <button onClick={() => setCounter(counter - 1)}>-1</button>
      <button onClick={() => setCounter(counter + 1)}>+1</button>
    </div>
  )
})

export default Counter2

那么接下来我们来先研究一下上面核心的一段代码代表什么意思

useState来自react，需要从react中导入，是一个hook函数, 官方中也将它成为State Hook, 它与class组件里面的 this.state 提供的功能完全相同;

一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留。

useState只有一个参数: 接收一个初始化状态的值(设置初始值)，在第一次组件被调用时使用来作为初始化值(如果不设置则默认为undefined);

useState的返回值: 返回一个数组，数组包含两个元素;

  • 元素一: 当前状态的值(第一次调用为初始化值);
  • 元素二: 是一个设置状态值变化的函数;
  • 不过我们如果总是使用索引来获取这两个元素总是不方便的, 因此在开发中我们通常是会对数组进行解构(当然要取什么名字是自定义的)
  • 例如上面代码: const [counter, setCounter] = useState(100)

上面代码中, 点击button按钮后，会完成两件事情:

调用元素二: setCounter，设置一个新的值;

组件重新渲染，并且根据新的值返回DOM结构;

相信通过上面的一个简单案例，你已经会喜欢上Hook的使用了。

Hook 就是 JavaScript 函数，这个函数可以帮助你钩入(hook into) React State以及生命周期等特性;

但是使用它们会有两个额外的规则:

只能在函数组件的顶层调用 Hook。不能在循环语句、条件判断语句或者子函数中调用。

只能在 React 的函数组件和自定义hook中调用 Hook。不能在其他 JavaScript 函数中调用。

Tip

Hook 指的类似于useState、这样的某一个函数

Hooks 是对这一类函数的统称

大家可能有疑惑: 为什么叫 useState 而不叫 createState?

“create” 可能不是很准确，因为 state 只在组件首次渲染 的时候才会被创建。

在下一次重新渲染时，就已经不是创建了, useState 会返回给我们当前所保存的state(如果每次都创建新的变量，它就不是 “state”了)。

这也是 Hook 的名字总是以 use 开头的一个原因, 因为你总是在使用而不是创建。

当然，我们也可以在一个组件中定义多个变量和复杂变量(数组、对象)

import React, { memo, useState } from 'react'

const App = memo(() => {
  // 简单数据
  const [counter, setCounter] = useState(10)
  const [message, setMessage] = useState("Hello World")
  // 复杂数据
  const [banners, setBanners] = useState(["aaa", "bbb", "ccc"])
  const [infos, setInfos] = useState({
    name: "chenyq",
    age: 18,
    height: 1.88
  })

  function changeNumber() {
    setCounter(counter + 1)
  }

  return (
    <div>
      <h2>{counter}</h2>
      <button onClick={changeNumber}>+1</button>
      <h2>{message}</h2>
      <h2>{banners}</h2>
      <h2>{infos.name}-{infos.age}-{infos.height}</h2>
    </div>
  )
})

export default App

到此这篇关于React Hook useState函数的详细解析的文章就介绍到这了,更多相关React Hook  useState函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 关于react useState更新异步问题

    关于react useState更新异步问题

    目录 react useState更新异步 记useState异步更新小坑 问题点 react useState更新异步 当我们使用react中useState这个hook时候,如下 const [page, setPage] = useState(1); const handlerClick = (e)=>{     setPage(e.current);     console.log(page); } 当我打印page时候,此时page还是1,因为useState的更新是异步的,这和rea

  • React hooks useState异步问题及解决

    React hooks useState异步问题及解决

    目录 React Hooks useState异步问题 原因 解决方法 React中useState异步更新小坑 问题点 React Hooks useState异步问题 最近在开发中遇到一个问题 我接口请求回来的数据 用useState存储起来. 但是我后面 去改变这个数据的时候每次拿到都是上次的数据没办法及时更新. 原因 useState 返回的更新状态方法是异步的,要在下次重绘才能获取新值.不要试图在更改状态之后立马获取状态. 解决方法 应该使用useRef 存储这个数据,在useEffe

  • React中useState的使用方法及注意事项

    React中useState的使用方法及注意事项

    目录 一.基本使用 第一个问题:setCount修改值时它是同步还是异步? 第二个问题:连续调用 setCount会发生什么? 二.注意事项 1.复杂变量的修改 2.异步操作获取更新的值 总结 一.基本使用 useState是 react 提供的一个定义响应式变量的 hook 函数,基本语法如下: const [count, setCount] = useState(initialCount) 它返回一个状态和一个修改状态的方法,状态需要通过这个方法来进行修改: initialCount 是我们

  • React中hook函数与useState及useEffect的使用

    React中hook函数与useState及useEffect的使用

    目录 1. 简介 2. useState使用 3. useEffect使用 useEffect发起网络请求 1. 简介 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数组件,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并向下传递参数给 UI 组件进行渲染.React在v16.8 的版本中推出了 React Hooks 新特性,Hook是一套工具函数的集合,它增强了函数

  • React18 useState何时执行更新及微任务理解

    目录 函数式组件中的useState 测试1 测试2 类组件中的setState setState在promise之前定义 setState在promise之后定义 结论 函数式组件中的useState 前言:众所周知useState是异步的,但网络上对于useState何时异步更新并没有一个共识,为了探究,做一个简单的实验,实验目的是探究useState与微任务.宏任务的先后关系 测试1 实验步骤:点击按钮触发事件,在事件中我们做三件事:修改state/定义一个宏任务setTimeout /定

  • react中使用usestate踩坑及解决

    react中使用usestate踩坑及解决

    目录 usestate的常规用法 useState遇到的坑 1.useState不适合复杂对象的更改 2.useState异步回调的问题 3.根据hook的规则,使用useState的位置有限制 4.使用useState,回调函数形式更改数据 5.useState存入的值只是该值的引用(引用类型) 6.useState,如果保存引用数据,useEffect检测不到变化? 7.useState无法保存一个函数 useState实现原理 usestate的常规用法 在react框架中,不适用类组件,

  • React超详细分析useState与useReducer源码

    目录 热身准备 为什么会有hooks hooks执行时机 两套hooks hooks存储 初始化 mount useState mountWorkInProgressHook 更新update updateState updateReducer updateWorkInProgressHook 总结 热身准备 在正式讲useState,我们先热热身,了解下必备知识. 为什么会有hooks 大家都知道hooks是在函数组件的产物.之前class组件为什么没有出现hooks这种东西呢? 答案很简单,

  • React函数式组件Hook中的useState函数的详细解析

    目录 前言 一.什么是函数式组件 二.useState 前言 公司项目需要使用react,而函数式组件也是官方比较推荐的!!!所以学习hooks是很重要的. 一.什么是函数式组件 纯函数组件有以下特点: 没有状态 没有生命周期 没有 this 因存在如上特点,使得纯函数组件只能做UI展示的功能, 涉及到状态的管理与切换就不得不用到类组件或者redux. 但因为简单的页面也是用类组件,同时要继承一个React实例,使得代码会显得很重. 以前我们可以使用class来声明一个组件,其实使用functi

  • React Hook中的useState函数的详细解析

    useState => 让函数组件具有维持状态的能力useState 这个 Hook 是用来管理 state 的,它可以让函数组件具有维持状态的能力.即在一个函数组件的多次渲染之间,这个 state 是共享的. Hooks 的最大的作用就是可以让你在不编写class的情况下使用state以及其他的 React 特性 useState的详细解析 在上一篇文章中, 我用到useState来让大家体验一下hooks函数 import { memo, useState } from "react&

  • React函数式组件Hook中的useEffect函数的详细解析

    React函数式组件Hook中的useEffect函数的详细解析

    目录 前言 useEffect的作用 useEffect的使用? 1.class组件 2.函数式组件 总结 前言 React函数式编程没有生命周期,因此需要借助useEffect来实现. useEffect的作用 发ajax请求获取数据 设置订阅/获取定时器 手动更改真实DOM useEffect的使用? 1.class组件 在class组件中可以使用生命周期函数,知道组件触发的过程. 代码如下(示例): import React, { Component } from 'react' expo

  • React Hook中的useEffecfa函数的使用小结

    目录 useEffect的详细解析 useEffecf基本使用 清除副作用(Effect) 使用多个useEffect useEffect性能优化 useEffect的详细解析 useEffecf基本使用 书接上文, 上一篇文章我们讲解了State Hook, 我们已经可以通过这个hook在函数式组件中定义state 我们知道在类组件中是可以有生命周期函数的, 那么如何在函数组件中定义类似于生命周期这些函数呢? Effect Hook 可以让你来完成一些类似于class中生命周期的功能; 事实上

  • React Hook中useState更新延迟问题及解决

    目录 React Hook中useState更新延迟 React Hook useState连续更新对象问题 React Hook中useState更新延迟 方法一:去掉useEffect的第二个参数 例如以下代码 错误实例 const[zoom, setZoom] = useState(0); useEffect(() = >{     document.getElementById('workspace-content').addEventListener('mousewheel', scr

  • Java中的main函数的详细介绍

    Java中的main函数的详细介绍 JAVA中的主函数是我们再熟悉不过的了,相信每个学习过JAVA语言的人都能够熟练地写出这个程序的入口函数,但对于主函数为什么这么写,其中的每个关键字分别是什么意思,可能就不是所有人都能轻松地答出来的了.我也是在学习中碰到了这个问题,通过在网上搜索资料,并加上自己的实践终于有了一点心得,不敢保留,写出来与大家分享. 主函数的一般写法如下: public static void main(String[] args){-} 下面分别解释这些关键字的作用: (1)p

  • Mybatis中的config.xml配置文件详细解析

    经过前面的文章,我觉得对Mybatis的正题理解已经足够了,但是对Mybatis的使用,我觉得还是会有一点的模糊,就我个人而言,我觉得掌握好Mybatis框架,主要要明白三个文件,第一个就是等下要谈论的Mybatis-comfig.xml文件,还有就是**Mapper.xml,以及我们所定义的Mapper类,理解了这三个东西,然后有sql的基础,还有java的基础的话,后面不论是使用基于xml的方法,还是基于java-based Configuration的方法,都会简单的多. 废话不多说,现在

  • Python中json.dumps()函数的使用解析

    json.dumps将一个Python数据结构转换为JSON import json data = { 'name' : 'myname', 'age' : 100, } json_str = json.dumps(data) json库的一些用法 方法 作用 json.dumps() 将python对象编码成Json字符串 json.loads() 将Json字符串解码成python对象 json.dump() 将python中的对象转化成json储存到文件中 json.load() 将文件中

  • ASP中常用的函数和详细说明第1/2页

    各位都把ASP用的函数和详细说明贴出来,供大家学习. 我知道的如下: 1.函数array() 功能:创建一个数组变量 格式:array(list) 参数:list 为数组变量中的每个数值列,中间用逗号间隔 例子: <% i = array ("1","2","3") %> 结果: i 被赋予为数组 2.函数Cint() 功能:将一表达式/其它类型的变量转换成整数类型(int) 格式:Cint(expression) 参数:expres

  • 关于ES6中的箭头函数超详细梳理

    关于ES6中的箭头函数超详细梳理

    目录 一.箭头函数的介绍 1.1 什么是箭头函数 1.2 基本语法 1.3 箭头函数的参数 1.4 箭头函数的函数体 二.箭头函数的this指向规则 三.箭头函数的arguments规则 3.1 箭头函数没有自己的arguments 3.2 可以用rest替代,rest参数获取函数的多余参数 3.3 箭头函数不支持重复函数参数的名称 3.4 箭头函数不能用作Generator,不能使用yeild关键字 四.箭头函数的注意事项 五.箭头函数不适用场景 六.箭头函数与普通函数简单区别总结 一.箭头函

随机推荐