react hooks--useState

🕗 发布于 2024-09-22 21:24 react.js 前端 javascript

概述

useState 可以使函数组件像类组件一样拥有 state，也就说明函数组件可以通过 useState 改变 UI 视图。那么 useState 到底应该如何使用，底层又是怎么运作的呢，首先一起看一下 useState 。

问题：Hook 是什么? 一个 Hook 就是一个特殊的函数，让你在函数组件中获取状态等 React 特性
使用模式：函数组件 + Hooks
特点：从名称上看，Hook 都以 use 开头

基本使用

使用场景：当你想要在函数组件中，使用组件状态时，就要使用 useState Hook 了
作用：为函数组件提供状态（state）
使用步骤：

1. 导入 useState 函数：import { useState} from 'react'
2. 调用 useState 函数，并传入状态的初始值
3. 从 useState 函数的返回值中，拿到状态和修改状态的函数
4. 在 JSX 中展示状态
5. 在按钮的点击事件中调用修改状态的函数，来更新状态

规则：

- 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用
- 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用

useState接受唯一一个参数，在第一次组件被调用时使用来作为初始化值

使用数组解构简化

比如，要获取数组中的元素：

原始方式：索引访问

const arr = ['aaa', 'bbb']

const a = arr[0]  // 获取索引为 0 的元素
const b = arr[1]  // 获取索引为 1 的元素

简化方式：数组解构

- 相当于创建了两个变量（可以是任意的变量名称）分别获取到对应索引的数组元素

const arr = ['aaa', 'bbb']
const [a, b] = arr

const [state, setState] = arr

使用数组解构简化 useState 的使用

- 约定：修改状态的函数名称以 set 开头，后面跟上状态的名称

// 解构出来的名称可以是任意名称
const [state, setState] = useState(0)
const [age, setAge] = useState(0)
const [count, setCount] = useState(0)

演示示例

父传子

App.js--父组件

import React from 'react'
import UseFun from './components/useFun'

export default function App() {
  let msg = '132'
  return (
    <div>
      <UseFun msg={msg}/>
    </div>
  )
}

src/components/useFun.js--子组件

import React from 'react'
import PropTypes from 'prop-types'

function useFun(props) {
  return (
    <div>{props.msg}</div>
  )
}

useFun.defaultProps = {
  msg: '456'
}

useFun.propTypes = {
  msg: PropTypes.string
}

export default  useFun

计数器

App.js

import React from 'react'
import UseFun from './components/UseFun'
import CountFun from './components/CountFun'

export default function App() {
  let msg = '132'
  return (
    <div>
      <CountFun />
    </div>
  )
}

components/CountFun.jsx

import React from 'react'
import { useState } from 'react';

export default function CountFun() {

  let [count, setCount] = useState(0)

  function changeCount(){
    setCount(count + 1)
  }
 
  return (
    <div>
      {/* 展示状态值 */}
      <h1>useState Hook - {count}</h1>
      {/* 点击按钮，让状态值 +1 */}
      <button onClick={changeCount}>+1</button>
      <button onClick={() => changeCount()}>+1</button>
    </div>
  )
}

或下面的做法也可以

import { useState } from 'react'

export default function const CountFun = () => {
  // 返回值是一个数组
  const stateArray = useState(0)

  // 状态值 -> 0
  const state = stateArray[0]
  // 修改状态的函数
  const setState = stateArray[1]

  return (
    <div>
      {/* 展示状态值 */}
      <h1>useState Hook -> {state}</h1>
      {/* 点击按钮，让状态值 +1 */}
      <button onClick={() => setState(state + 1)}>+1</button>
    </div>
  )
}

参数：状态初始值。比如，传入 0 表示该状态的初始值为 0

- 注意：此处的状态可以是任意值（比如，数值、字符串等），而 class 组件中的 state 必须是对象

返回值：数组，包含两个值：1 状态值（state） 2 修改该状态的函数（setState）

useState详解

概述

状态的读取和修改：

状态的使用：1 读取状态 2 修改状态

读取状态：该方式提供的状态，是函数内部的局部变量，可以在函数内的任意位置使用
修改状态：

setCount(newValue) 是一个函数，参数表示：新的状态值
调用该函数后，将使用新的状态值替换旧值
修改状态后，因为状态发生了改变，所以，该组件会重新渲染

组件的更新过程：

函数组件使用 useState hook 后的执行过程，以及状态值的变化：

组件第一次渲染：

1. 从头开始执行该组件中的代码逻辑
2. 调用 useState(0) 将传入的参数作为状态初始值，即：0
3. 渲染组件，此时，获取到的状态 count 值为： 0

组件第二次渲染：

1. 点击按钮，调用 setCount(count + 1) 修改状态，因为状态发生改变，所以，该组件会重新渲染
2. 组件重新渲染时，会再次执行该组件中的代码逻辑
3. 再次调用 useState(0)，此时 React 内部会拿到最新的状态值而非初始值，比如，该案例中最新的状态值为 1
4. 再次渲染组件，此时，获取到的状态 count 值为：1

注意：useState 的初始值(参数)只会在组件第一次渲染时生效。

也就是说，以后的每次渲染，useState 获取到都是最新的状态值。React 组件会记住每次最新的状态值!

注意点：

在普通函数(方法)中，不能使用hooks
在自定义的hooks中可以使用，自定义hooks必须以use开头

基本数据类型

引入useState

import { useState } from 'react';

在函数组件内部定义state数据

let [count, setCount] = useState(0);
let [name, setName] = useState('张三')

useState会返回一个数组，数组有两个值

第一个值：代表state数据
第二个值：更新这个state数据的一个函数，一般函数变量取名字通常是setXxx

可以定义多个 state值

修改数据：

function changeName() {
    setName('李四');
}

完整代码：

import React from 'react'
import { useState } from 'react';

function useFun(props) {
  let [msg, setMsg] = useState('张三')

  function changeMsg(){
    setMsg('李四')
  }

  return (
    <div>
      <p>msg：{msg}</p>
      <button onClick={changeMsg}>修改msg</button>
    </div>
  )
}

export default  useFun

引用数据类型

定义对象数据

let [user, setUser] = useState({
    name: 'zs',
    age: 20
})

修改对象

function changeUserName() {
    setUser({
        name: 'ls',
    })
}

这样修改对象，会导致其他属性丢失，因为它没有自动合并对象

正确方式：

function changeUserName() {
    setUser({
        ...user,
        name: 'ls',
    })
}

可以将整个对象解构扩展，然后将修改的属性覆盖原来属性

注意：

修改state数据第一个参数可以是函数

setUser((prevState) => {
    console.log(prevState)
    return {
        ...prevState,
        name: 'ls'
    }
})

这个函数和类组件的setState的第一个参数是一致的

修改数据函数没有第二个参数

修改数据的函数仍然是异步的，不是同步的。

完整代码：

import React from "react";
import { useState } from "react";

function useFun(props) {
  let [msg, setMsg] = useState("张三");
  let [user, setName] = useState({
    name: "zs",
    age: 20,
  });

  function changeMsg() {
    setMsg("李四");
  }

  const changeName = () => {
    // setName({
    //   ...user,
    //   name: 'ls'
    // })
    //或如下写法：
    setName((prevState) => {
      console.log(prevState);
      return {
        ...prevState,
        name: "ls",
      };
    });
  };

  return (
    <div>
      <p>msg：{msg}</p>
      <button onClick={changeMsg}>修改msg</button>
      <hr />
      <p>name:：{user.name}</p>
      <p>age: {user.age}</p>
      <button onClick={changeName}>修改name</button>
    </div>
  );
}

export default useFun;

为函数组件添加多个状态

问题：如果一个函数组件需要多个状态，该如何处理?
回答：调用 useState Hook 多次即可，每调用一次 useState Hook 可以提供一个状态。
注意：useState Hook 多次调用返回的 [state, setState] 相互之间，互不影响。

注意：React Hooks 只能直接出现在函数组件中，不能嵌套在 if/for/其他函数中！

否则就会报错：React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render

React 的 useState 这个 Hook 被条件性（放在一个条件判断中）的调用了。

React Hooks 必须要每次组件渲染时，按照相同的顺序来调用所有的 Hooks。

为什么会有这样的规则？因为 React 是按照 Hooks 的调用顺序来识别每一个 Hook，如果每次调用的顺序不同，导致 React 无法知道是哪一个 Hook
通过开发者工具可以查看到。

如何监听 state 变化？

类组件 setState 中，有第二个参数 callback 或者是生命周期componentDidUpdate 可以检测监听到 state 改变或是组件更新。

那么在函数组件中，如何怎么监听 state 变化呢？这个时候就需要 useEffect 出场了，通常可以把 state 作为依赖项传入 useEffect 第二个参数 deps ，但是注意 useEffect 初始化会默认执行一次。

具体可以参考如下 Demo :

dispatch更新特点

上述讲的批量更新和 flushSync ，在函数组件中，dispatch 更新效果和类组件是一样的，但是 useState 有一点值得注意，就是当调用改变 state 的函数dispatch，在本次函数执行上下文中，是获取不到最新的 state 值的，把上述demo 如下这么改：

结果：0，0，0

原因很简单，函数组件更新就是函数的执行，在函数一次执行过程中，函数内部所有变量重新声明，所以改变的 state ，只有在下一次函数组件执行时才会被更新。所以在如上同一个函数执行上下文中，number 一直为0，无论怎么打印，都拿不到最新的 state 。

useState注意事项

在使用 useState 的 dispatchAction 更新 state 的时候，记得不要传入相同的 state，这样会使视图不更新。比如下面这么写：

如上例子🌰中，当点击按钮后，发现视图没有改变，为什么会造成这个原因呢？

在 useState 的 dispatchAction 处理逻辑中，会浅比较两次 state ，发现 state 相同，不会开启更新调度任务； demo 中两次 state 指向了相同的内存空间，所以默认为 state 相等，就不会发生视图更新了。

解决问题：把上述的 dispatchState 改成 dispatchState({...state}) 根本解决了问题，浅拷贝了对象，重新申请了一个内存空间。

原文地址：https://blog.csdn.net/weixin_43285360/article/details/142301885

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Docker进入容器运行命令
下一篇：命名管道详解

软考之面向服务架构SOA-通信方法
SOAP 是一种基于 XML 的协议，用于在分布式计算环境中交换结构化信息。它定义了一套标准的消息格式，可以通过各种网络协议（如 HTTP、SMTP）进行传输。REST 是一种基于 HTTP 协议的架
阅读更多2024-11-14
Python基础教程：文件操作
上述内容介绍了Python中文件操作的基本方法，包括使用`open()`函数打开文件、读取和写入文件、关闭文件以及使用`with`语句自动管理文件的打开和关闭。还提到了文件操作中可能遇到的异常处理。
阅读更多2024-11-14
24/11/13 算法笔记＜强化学习＞ DQN算法
DQN维护两个神经网络，一个是用于预测Q值的评估网络（Evaluation Network），另一个是用于生成目标Q值的目标网络（Target Network）。：在传统的Q学习中，需要维护一个Q表来
阅读更多2024-11-14
测试自动化如何和业务流程结合？
测试自动化框架固然重要，但是最终自动化的目的都是为了业务服务的。那测试自动化如何对业务流程产生积极影响？
阅读更多2024-11-14
通过微信测试公众号实现扫码登录
实现微信的扫码登录，向微信服务器发送请求，获取accesstoken和ticket，获取二维码，登录成功后会回调，发送模板信息
阅读更多2024-11-14
【2024最新】基于springboot+vue的闲一品交易平台lw+ppt
开发技术：SpringBoot、php、Python、小程序、SSM、Vue、MySQL、JSP、ElementUI等，。专栏推荐：SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小
阅读更多2024-11-14
java组件安全
默认端口：8983。
阅读更多2024-11-14
1111111111待修改--大流量分析（三）-BUUCTF
https://buuoj.cn/challenges#%E5%A4%A7%E6%B5%81%E9%87%8F%E5%88%86%E6%9E%90%EF%BC%88%E4%B8%89%EF%BC%89
阅读更多2024-11-14
DAY111PHP开发框架&THIKNPHP&反序列化&POP利用链&RCE执行&文件删除
函数方法file_exists，@unlink($filename);//$relation可控，找到一个没有visible方法或不可访问这个方法的类时，即可调用_call()魔法方法。1、__des
阅读更多2024-11-14
如何在OCI上配置并使用OCI GenAI服务的步骤
如何在OCI上配置并使用OCI GenAI服务的步骤
阅读更多2024-11-14