云计算、AI、云原生、大数据等一站式技术学习平台

网站首页 > 教程文章 正文

React18 Hook中的useState和useEffect

jxf315 2025-06-18 21:58:09 教程文章 18 ℃

React Hook(钩子)本质上是一个函数(命名上总是以use开头),该函数可以挂载任何功能。use 开头的函数被称为 Hook。Hook 比普通函数更为严格。你只能在你的组件(或其他 Hook)的 顶层 调用 Hook。

Hook种类:

1、useState(解决函数组件中无法使用状态的问题)

2、useEffect(解决函数组件中无法使用生命周期的问题)

State Hook

用法

State Hook是一个在函数组件中使用的函数(useState),用于在函数组件中使用状态

useState函数有一个参数,这个参数的值表示状态的默认值

  • 函数有一个参数,这个参数的值表示状态的默认值
  • 函数的返回值是一个数组,该数组一定包含两项 第一项: 状态的值 第二项: 一个函数,用来改变状态

一个函数组件中可以有多个状态,这种做法有利于横向切分关注点

Effect Hook

Effect Hook: 用于在函数组件中处理副作用

副作用:

  1. ajax请求
  2. 计时器
  3. 其它异步操作
  4. 更改真实DOM对象
  5. 本地存储
  6. 其它会对外部产生影响的操作

函数useEffect,接收一个函数作为参数,接收的函数就是需要进行副作用操作的函数。

副作用函数的运行时间点,是在页面完成真实的UI渲染之后。因此它的执行是异步的,不会阻塞浏览器。


最近发表
标签列表