React中useRef案例详解

本文详细介绍了useRef的基本概念和应用场景，通过多个实例展示了如何使用useRef进行DOM操作和数据存储，同时对比了useRef与Class组件的区别，并提供了相关的注意事项和最佳实践。

useRef的基本概念

useRef 是 React Hooks 中的一个工具函数，用于在组件的整个生命周期内存储可变值。useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（初始值）。useRef 可以用来保存任何可变数据，而不仅仅是 DOM 元素引用。需要注意的是，useRef 返回的 ref 对象在函数组件重新渲染时不会改变引用。

useRef的作用与应用场景

useRef 的主要作用是获取和操作 DOM 节点，或保存一些在渲染过程中需要持久化但不需要引起组件重新渲染的数据。应用场景包括：

• 访问和操作 DOM 节点
• 保存一些状态或变量，这些状态或变量不需要触发组件重新渲染
• 用于实现一些低级的、DOM 相关的操作

接下来，我们将详细介绍如何使用 useRef。

如何创建一个useRef

使用 useRef 创建一个 ref 对象的基本步骤如下：

1. 调用 useRef 函数，并传入一个初始值。
2. useRef 将返回一个 ref 对象，其 .current 属性被初始化为传入的初始值。
3. 在组件内部使用该 ref 对象来访问或更新 .current 属性。

示例代码如下：

import React, { useRef } from 'react';

function BasicUseRefExample() {
  const myRef = useRef(42); // 创建一个 ref 对象，初始值为 42
  console.log(myRef.current); // 输出 42

  // 更新 ref 对象的 current 属性
  myRef.current = 100;

  return (
    <div>
      <p>Current value: {myRef.current}</p>
      <button onClick={() => myRef.current += 1}>Increment</button>
    </div>
  );
}

export default BasicUseRefExample;

useRef的返回值解析

useRef 返回的对象拥有 .current 属性，这个属性可以在组件的整个生命周期内保存可变数据。.current 属性的初始值由调用 useRef 时传入的参数指定。在组件渲染过程中，.current 属性可以被更新，但不会触发组件的重新渲染。

修改DOM节点样式

使用 useRef 可以直接访问和操作 DOM 节点，例如修改样式。以下是一个示例，展示了如何使用 useRef 来修改 DOM 节点的样式。

示例代码如下：

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

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

  useEffect(() => {
    // 修改 ref 对象所指向的 DOM 节点的样式
    if (ref.current) {
      ref.current.style.color = 'red';
    }
  }, []);

  return (
    <div>
      <p ref={ref}>Hello, World!</p>
    </div>
  );
}

export default ChangeStyle;

获取DOM节点的尺寸

除了修改样式，使用 useRef 还可以获取 DOM 节点的尺寸。以下示例展示了如何获取 DOM 节点的宽度和高度。

示例代码如下：

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

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

  useEffect(() => {
    // 获取 ref 对象所指向的 DOM 节点的尺寸
    if (ref.current) {
      const { width, height } = ref.current.getBoundingClientRect();
      console.log(`Width: ${width}, Height: ${height}`);
    }
  }, []);

  return (
    <div>
      <p ref={ref}>Hello, World!</p>
    </div>
  );
}

export default GetDimensions;

Class组件中获取DOM节点的方法

在 Class 组件中，获取 DOM 节点通常使用 ref 属性和 React.createRef 方法。以下是一个示例，展示了如何在 Class 组件中获取 DOM 节点。

示例代码如下：

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

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

  componentDidMount() {
    // 获取 ref 对象所指向的 DOM 节点
    if (this.myRef.current) {
      console.log(this.myRef.current);
    }
  }

  render() {
    return (
      <div>
        <p ref={this.myRef}>Hello, World!</p>
      </div>
    );
  }
}

export default MyComponent;

useRef相对于Class组件的优势

使用 useRef 相对于 Class 组件的优势主要包括：

1. 简洁性：useRef 语法更加简洁，不需要处理复杂的生命周期方法。
2. 可组合性：函数组件可以更轻松地组合在一起，而不会丢失状态。
3. 易用性：在函数组件中使用 useRef 通常更容易理解和维护。

常见错误及解决方法

1. 忘记更新 .current 属性：确保在需要时更新 .current 属性，否则可能会遇到意外行为。
2. 误解 .current 属性的作用：.current 属性可以保存任何可变数据，而不仅仅是 DOM 节点引用。务必正确使用 .current 属性。

注意事项与最佳实践

1. 避免在渲染过程中更新 .current 属性：更新 .current 属性通常应该放在 useEffect 或其他合适的位置，而不是在渲染过程中。
2. 谨慎使用 .current 属性：.current 属性在组件的整个生命周期内都是可变的，因此要小心不要意外更改其值。
3. 使用 useRef 进行低级操作：useRef 适合进行低级的、DOM 相关的操作，如修改样式或获取节点尺寸。

具体代码示例

import React, { useRef } from 'react';

function PitfallExample() {
  const ref = useRef(0);

  function updateRef() {
    ref.current += 1;
  }

  return (
    <div>
      <p>Current value: {ref.current}</p>
      <button onClick={updateRef}>Increment</button>
    </div>
  );
}

export default PitfallExample;

useRef的应用总结

useRef 是一个强大的工具，用于在组件的整个生命周期内保存可变数据。它主要用于访问和操作 DOM 节点，或保存一些在渲染过程中需要持久化但不需要引起组件重新渲染的数据。通过 useRef，我们可以在函数组件中实现类似 Class 组件的功能，同时保持代码的简洁性和可维护性。

进一步学习的资源推荐

• 慕课网提供了丰富的 React 课程，适合不同水平的开发者。
• React 官方文档和社区资源也是学习和深入了解 useRef 的好资源。