首页手记 useRef入门：React钩子的基础教程

useRef入门：React钩子的基础教程

标签：

JavaScript React.JS Vue.js

概述

useRef是React中的一个钩子，用于在函数组件中添加引用值和直接访问DOM元素。它在保存状态、优化性能和与第三方库集成等方面非常有用。本文将详细介绍useRef的使用场景、语法和用法，以及如何在不同场景中应用它来提高代码效率和性能。useRef入门教程涵盖了从基本概念到高级应用的所有内容。

什么是useRef

useRef的基本概念

useRef 是 React 中的一个钩子（hook），用于在函数组件中添加引用值。useRef 返回一个可变的 ref 对象，其 .current 属性可用于存储任何值，并且可以用来保存任何值或 DOM 元素。这对于需要直接访问 DOM 元素或需要保存一些值但不会触发组件重新渲染的场景非常有用。

import React, { useRef } from 'react';

function Example() {
  const textInput = useRef(null);

  const handleFocus = () => {
    textInput.current.focus();
  };

  return (
    <>
      <input ref={textInput} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </>
  );
}

export default Example;

useRef的使用场景

useRef 的主要使用场景包括：

直接访问 DOM 元素：有时需要直接操作 DOM 元素，例如获取元素的尺寸、位置、内容等。
保存任意值：可以用来保存一些变量，这些变量不会导致组件重新渲染，例如计时器、动画控制等。
避免不必要的重新渲染：通过 useRef 存储的值不会触发组件的重新渲染，因此可以用来优化性能。
与第三方库集成：在与第三方库交互时，可能需要引用 DOM 元素或需要保存一些状态。

示例代码

下面是一个简单的示例，展示了如何使用 useRef 获取 DOM 元素并保存其值。

import React, { useRef } from 'react';

function Example() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus(); // 使用 .current 访问 DOM 元素
  };

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </>
  );
}

export default Example;

useRef的语法和用法

useRef的创建和初始化

useRef 的基本用法是创建一个新的 ref 对象。ref 对象包含一个可变的 .current 属性，初始值为传入的 useRef 的参数。例如：

const myRef = useRef(initialValue);

示例代码

下面是一个示例，展示了如何使用 useRef 初始化一个引用对象，并在组件中使用它。

import React, { useRef } from 'react';

function MyComponent() {
  const ref = useRef('Initial value'); // 初始化 ref 对象

  const updateRefValue = () => {
    ref.current = 'Updated value'; // 更新引用值
  };

  return (
    <>
      <p>{ref.current}</p> {/* 显示引用值 */}
      <button onClick={updateRefValue}>Update Ref</button>
    </>
  );
}

export default MyComponent;

如何在组件中使用useRef

在组件中使用 useRef 通常涉及将 ref 传递给需要引用的元素。可以通过 ref 属性将 useRef 对象传递给 DOM 元素或 React 子组件。

示例代码

下面是一个示例，展示了如何在组件中获取并操作 DOM 元素的引用。

import React, { useRef } from 'react';

function ExampleComponent() {
  const ref = useRef(null);

  const handleClick = () => {
    if (ref.current) {
      console.log(ref.current.value); // 访问 DOM 元素的属性
    }
  };

  return (
    <>
      <input ref={ref} type="text" />
      <button onClick={handleClick}>Log Input Value</button>
    </>
  );
}

export default ExampleComponent;

useRef与DOM操作

如何获取DOM元素的引用

通过将 useRef 对象传递给元素的 ref 属性，可以获取该元素的引用。这允许我们在组件中直接访问和操作 DOM 元素。

示例代码

以下是一个示例，展示了如何使用 useRef 获取并操作 DOM 元素。

import React, { useRef } from 'react';

function App() {
  const inputRef = useRef(null);

  const logInputValue = () => {
    console.log(inputRef.current.value);
  };

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={logInputValue}>Log Input Value</button>
    </>
  );
}

export default App;

通过useRef更新DOM元素

useRef 可以用来直接更新 DOM 元素的属性或内容。例如，可以通过 useRef 来改变元素的 style 属性。

示例代码

下面是一个示例，展示了如何使用 useRef 更新 DOM 元素的 style 属性。

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

function Example() {
  const divRef = useRef(null);
  const [color, setColor] = useState('red');

  const changeColor = () => {
    divRef.current.style.backgroundColor = color;
    setColor(color === 'red' ? 'blue' : 'red');
  };

  return (
    <>
      <div ref={divRef} style={{ width: '100px', height: '100px' }}></div>
      <button onClick={changeColor}>Change Color</button>
    </>
  );
}

export default Example;

useRef与性能优化

使用useRef避免不必要的重新渲染

useRef 提供了一种方式来保存和更新状态，而不触发组件的重新渲染。这对于需要频繁操作但不需要每次都重新渲染的场景非常有用。

示例代码

下面是一个示例，展示了如何使用 useRef 来优化性能，避免不必要的重新渲染。

import React, { useRef } from 'react';

function PerformanceOptimizationExample() {
  const timerRef = useRef();

  const startTimer = () => {
    timerRef.current = setInterval(() => console.log('Tick'), 1000);
  };

  const stopTimer = () => {
    clearInterval(timerRef.current);
  };

  return (
    <>
      <button onClick={startTimer}>Start Timer</button>
      <button onClick={stopTimer}>Stop Timer</button>
    </>
  );
}

export default PerformanceOptimizationExample;

useRef在性能敏感场景的应用

在性能敏感的场景中，例如动画、定时器、DOM 操作等，使用 useRef 可以有效减少组件的重新渲染次数，从而提高性能。

示例代码

下面是一个示例，展示了如何在性能敏感场景中使用 useRef。

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

function PerformanceSensitiveExample() {
  const [isPlaying, setIsPlaying] = useState(false);
  const intervalRef = useRef();

  useEffect(() => {
    if (isPlaying) {
      intervalRef.current = setInterval(() => console.log('Tick'), 1000);
    } else {
      clearInterval(intervalRef.current);
    }

    return () => clearInterval(intervalRef.current); // 清理定时器
  }, [isPlaying]);

  const togglePlay = () => {
    setIsPlaying(!isPlaying);
  };

  return (
    <>
      <button onClick={togglePlay}>{isPlaying ? 'Stop' : 'Start'}</button>
    </>
  );
}

export default PerformanceSensitiveExample;

useRef与其他钩子的搭配使用

useRef与useState的搭配使用

useRef 和 useState 通常结合使用，以在组件中保存和更新状态。useState 用于管理状态并触发重新渲染，而 useRef 用于保存不会导致重新渲染的值。

示例代码

下面是一个示例，展示了如何结合 useRef 和 useState 使用。

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

function CombinedUseRefAndUseStateExample() {
  const [value, setValue] = useState(0);
  const timerRef = useRef();

  useEffect(() => {
    timerRef.current = setInterval(() => {
      setValue(value => value + 1);
    }, 1000);

    return () => clearInterval(timerRef.current); // 清理定时器
  }, []);

  return (
    <>
      <p>{value}</p>
      <button onClick={() => clearInterval(timerRef.current)}>Clear Timer</button>
    </>
  );
}

export default CombinedUseRefAndUseStateExample;

useRef与useEffect的搭配使用

useRef 和 useEffect 常常结合使用，以在副作用中保存和更新引用值。例如，可以使用 useRef 来保存定时器 ID 或事件监听器。

示例代码

下面是一个示例，展示了如何结合 useRef 和 useEffect 使用。

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

function CombinedUseRefAndUseEffectExample() {
  const [count, setCount] = useState(0);
  const timerRef = useRef();

  useEffect(() => {
    timerRef.current = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(timerRef.current); // 清理定时器
  }, []);

  return (
    <>
      <p>{count}</p>
      <button onClick={() => clearInterval(timerRef.current)}>Clear Timer</button>
    </>
  );
}

export default CombinedUseRefAndUseEffectExample;

常见问题解答

useRef与React refs的区别

useRef 和 React refs 都可以用来获取 DOM 元素或组件实例的引用，但它们的使用方式和用法有所不同。useRef 是一个 hook，用于在函数组件中创建和使用引用；而 React refs 则是一个类组件中的概念，可以用来直接访问 DOM 元素或组件实例。

示例代码

下面是一个示例，展示了如何在类组件中使用 React refs 和在函数组件中使用 useRef。

import React, { Component, useRef } from 'react';

class ClassComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current); // 访问 DOM 元素或组件实例
  }

  render() {
    return <input ref={this.myRef} type="text" />;
  }
}

function FunctionComponent() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus(); // 使用 .current 访问 DOM 元素
  };

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </>
  );
}

export { ClassComponent, FunctionComponent };

useRef是否会影响组件的渲染

useRef 本身不会直接导致组件的重新渲染。它返回的是一个可变的引用对象，其 current 属性的变更不会触发组件的重新渲染。但是，如果 useRef 中的引用对象被传递给组件的 props 或状态，那么这些变化可能会导致组件重新渲染。

示例代码

下面是一个示例，展示了如何在使用 useRef 时避免不必要的重新渲染。

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

function UseRefExample() {
  const [value, setValue] = useState(0);
  const refValue = useRef(value);

  useEffect(() => {
    refValue.current = value; // 更新引用值，不会触发重新渲染
  }, [value]);

  const increment = () => {
    setValue(prevValue => prevValue + 1);
  };

  return (
    <>
      <p>{value}</p>
      <button onClick={increment}>Increment</button>
    </>
  );
}

export default UseRefExample;

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

米琪卡哇伊

手记
篇

粉丝

4

获赞与收藏

31

关注作者，订阅最新文章

阅读免费教程

JavaScript 入门教程

80个小节 325186 2304

后端通用面试教程

41个小节 32660 368

网络编程入门教程

20个小节 13520 255

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

useRef入门：React钩子的基础教程

示例代码

示例代码

示例代码

示例代码

示例代码

示例代码

示例代码

示例代码

示例代码

示例代码

示例代码

阅读免费教程