react-hooks知识梳理—3.useRef

最新推荐文章于 2025-06-09 10:23:52 发布

jiaojsun

最新推荐文章于 2025-06-09 10:23:52 发布

阅读量285

点赞数

CC 4.0 BY-SA版权

分类专栏： react-hooks知识梳理

本文链接：https://blog.csdn.net/jiaojsun/article/details/113902551

react-hooks知识梳理专栏收录该内容

6 篇文章

订阅专栏

本文探讨了React Hooks中useEffect和useRef的使用问题。针对useEffect在实现定时器时可能出现的count值捕获问题，提出了利用useRef作为变量来保持状态的持久性。同时，解释了useRef如何用于获取DOM元素和处理原生事件，以及在避免直接操作DOM时的优势。此外，还提到了useRef在处理复杂场景中的其他功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.回忆useEffect的问题

————————————————————————————————————————————————

想实现一个定时器的效果，每0.5s count加1

import React, { useState, useEffect } from 'react';
 
const Fetch = () => {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    setInterval(() => {
      setCount(count + 1 );
    }, 500);
  }, []);
 
  return (
    <div>
      count: {count}
    </div>
  )
};
 
function UseEffect() {
  return (
    <div className="App">
      <Fetch />
    </div>
  );
}
 
export default UseEffect;

但是执行一下，加了1就不动了

因为useEffect有一个特性是catpurrvalue,，就是没有任何依赖的情况下，会捕获初始传进来的值，后面不会在变化。所以看下面控制台里面每次打印都是0。

————————————————————————————————————————————————

useEffect添加一个依赖，这样依赖变化的时候，他就会跟着变化，有一个问题就是useEffect每次都会重新执行，即会产生一起新的回调，往往有时候不希望一些useEffect去执行，不执行的话就是不去添加依赖，但不添加依赖的话由于特性catpurrvalue，依赖的值可能是旧的，这样就会导致一个bug。这个时候useRef就登场了。

2.useRef功能一：作为变量

可以尝试用useRef解决上面的问题

import React, { useState, useEffect, useRef } from 'react';

const Fetch = () => {
  const [count, setCount] = useState(0);
  const countRef = useRef(null);

  useEffect(() => {
    countRef.current = count + 1;
  }, [count]);

  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count, countRef.current);
      setCount(countRef.current);
    }, 500);
    return () => clearInterval(timer);
  }, []);

  return (
    <div>
      count: {count}
    </div>
  )
};

function UseRef() {
  return (
    <div className="App">
      <Fetch />
    </div>
  );
}

export default UseRef;

理解一下，useRef里面的crrent是在组件整个生命周期中，不会随着state的变化而变化，可以理解为组件内部的一个全局变量，其他地方都可以访问到他的最新值，除非手动的给他变化，即countRef.current = count这样。而state在useEffect里面，是有capturevalue的，不一定访问到他的最新值，除非添加依赖

3.useRef功能二：获取dom

import React, { useState, useEffect, useRef } from 'react';

const Fetch = () => {
  const [count, setCount] = useState(0);
  const btnRef = useRef(null);

  useEffect(() => {
    const handleOnClick = () => {
      setCount(count + 1);
    };
    btnRef.current.addEventListener('click', handleOnClick, false);
    return () => {
      btnRef.current.removeEventListener('click', handleOnClick, false);
    };
  }, [count]);

  return (
    <div>
      count: {count}
      <br/>
      <button ref={btnRef}>+1</button>
    </div>
  )
};

function UseRef() {
  return (
    <div className="App">
      <Fetch />
    </div>
  );
}

export default UseRef;