React知识:useState和useRef的使用

在写React的时候,useStateuseRef是两个常见的hook。它们都能让函数组件"记住"一些数据,但作用场景和机制完全不同。这篇文章我们就来详细讲解什么时候用 useState,什么时候用 useRef

useState是什么

useState 是 React 提供的一个 状态 Hook ,允许你在函数组件中定义响应式的状态。

state 发生变化时,React 会重新渲染组件 ,以保证UI 和状态保持一致

用法示例

jsx 复制代码
import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>点击次数:{count}</p>
      <button onClick={() => setCount(count + 1)}>点我+1</button>
    </div>
  );
}

每次点击按钮,count 更新,React 会触发组件重新渲染,页面上的数字随之变化。

使用场景

  • 管理 UI 相关的状态:例如计数器、弹窗开关、表单输入值等。

  • 需要驱动渲染的变量:只要这个值变了,UI 就必须更新。

useRef是什么

如果我们希望组件记住一些信息,但 不希望触发重新渲染 ,可以使用 useRef

useRef 返回一个对象,只有一个属性:current

你可以把任何值存在 current 里,并在渲染之间保留它。

useState 不同的是:修改 ref.current 并不会引起组件重新渲染

用法

jsx 复制代码
import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>聚焦输入框</button>
    </>
  );
}

👉 ref={inputRef} 让 React 把这个 <input> 的 DOM 节点放进了 inputRef.current,所以我们就能调用它的原生方法 .focus()

使用场景

  1. 操作 DOM 元素
  • 聚焦输入框
  • 滚动到某个区域
  • 手动触发播放/暂停等
  1. 存储副作用中的变量
  • 保存 setInterval 的定时器 ID,避免放到state里导致无意义的渲染。

    ini 复制代码
    const timerRef = useRef(null);
    timerRef.current = setInterval(...);
    clearInterval(timerRef.current);
  1. 保存上一次的值
  • 例如对比本次和上次的股票价格,判断涨跌。
  • 这样不会影响渲染,但可以在逻辑里取到历史数据。

useState 和 useRef的区别

特性 useState useRef
是否触发重新渲染 ✅ 会 ❌ 不会
返回值 [state, setState] { current: value }
使用场景 用于 UI 状态 保存 DOM、存储副作用变量
修改方式 必须通过 setState 直接改 current
生命周期 组件每次渲染都会更新 渲染间隔中值保持不变
相关推荐
带娃的IT创业者4 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost5 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11065 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白5 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学6 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽6 小时前
【初学】调试 MCP Server
前端·mcp
四月_h7 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate7 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
行者..................8 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js
小爱同学_9 小时前
一次面试让我重新认识了 Cursor
前端·面试·程序员