Ref的使用，你学会了吗？

在React中，ref是一个引用对象，用于访问React元素或组件的真实DOM节点或React组件的实例。ref提供了一种在React中直接访问DOM节点或组件实例的方式，而不需要通过props或上下文传递数据。在本文中，我们将详细探讨ref的使用场景、注意事项以及在不同情况下如何正确使用ref。

1. 使用场景

1.1 访问DOM节点

最常见的ref用例之一是访问DOM节点。通过ref，可以获取元素的引用，并直接操作或查询DOM。

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


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


  useEffect(() => {
    inputRef.current.focus();
  }, []);


  return ;
}

1.2 调用子组件的方法

还可以使用ref来调用子组件中暴露的方法或访问子组件中的状态。

import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';


function ParentComponent() {
  const childRef = useRef(null);


  const handleClick = () => {
    childRef.current.someMethod();
  };


  return (
    
      
      Call Child Method
    
  );
}

2. 注意事项

2.1 避免过度使用ref

尽管ref提供了直接访问DOM节点的能力，但过度使用ref可能会导致代码变得难以理解和维护。尽量避免在大型组件树中频繁使用ref。

2.2 避免直接修改DOM

使用ref时，应避免直接修改DOM。尽量使用React提供的状态和属性来更新UI，以保持应用程序的一致性和可维护性。

2.3 使用函数式组件中的ref

在函数式组件中，可以使用useRef钩子来创建ref，并将其传递给需要引用的元素或组件。

2.4 避免在render方法中使用ref

在render方法中使用ref会导致不稳定的行为，因为ref的值可能在每次渲染时都会重新创建。如果需要在render方法中使用ref，请确保它是稳定的，例如通过使用useRef。

3. 使用ref的注意事项

3.1 异步更新

当通过ref访问组件或DOM时，需要注意异步更新的情况。由于ref的更新可能是异步的，因此在访问ref之前，需要确保组件已经被正确渲染。

3.2 避免在函数组件中过度使用ref

在函数组件中，ref的使用应该谨慎。通常情况下，应尽量避免在函数组件中使用ref，除非有必要访问DOM节点或调用子组件的方法。

3.3 使用forwardRef包装子组件

如果需要在函数组件中使用ref并访问其子组件的DOM节点或方法，可以使用forwardRef来包装子组件，以使其能够接收ref。

const ChildComponent = React.forwardRef((props, ref) => {
  return ;
});

ref与state的不同

Ref和State是React中两种不同的概念，它们在用途、作用范围和使用方式上有很大的区别。

1. 作用范围

• Ref： Ref用于访问React元素或组件的实例或DOM节点。它们允许直接访问底层DOM节点或React组件的实例。
• State： State用于存储组件的可变数据，可以通过setState函数更新。State通常用于管理组件的内部状态。

2. 数据类型

• Ref： Ref可以引用任何JavaScript值，包括DOM节点、React组件实例或其他JavaScript对象。
• State： State通常用于存储组件的状态数据，可以是基本数据类型（如字符串、数字、布尔值）或复杂数据类型（如对象、数组）。

3. 更新方式

• Ref： Ref不会触发组件的重新渲染，它们是完全独立于组件渲染的。因此，对ref的更新不会导致组件重新渲染。
• State： State的更新会触发组件的重新渲染。当调用setState函数时，React会重新渲染组件，并将新的状态应用于组件。

4. 生命周期

• Ref： Ref的生命周期与组件的生命周期无关。它们在组件挂载、更新和卸载时都保持不变。
• State： State的生命周期与组件的生命周期密切相关。State在组件的生命周期中会发生变化，并随着组件的挂载、更新和卸载而被创建、更新和销毁。

5. 使用方式

• Ref： Ref通常用于访问DOM节点、调用子组件的方法或在组件之间共享数据。它们可以在函数组件和类组件中使用。
• State： State用于存储组件的内部状态数据，并且只能在类组件中使用。在函数组件中，可以使用useState钩子来创建和管理状态。

小结

• ref 是一种脱围机制，用于保留不用于渲染的值。
• ref 是一个普通的 JavaScript 对象，具有一个名为 current 的属性，你可以对其进行读取或设置。
• 通过调用 useRef Hook 来定义ref。
• 与 state 一样，ref 允许你在组件的重新渲染之间保留信息。
• 与 state 不同，设置 ref 的 current 值不会触发重新渲染。
• 不要在渲染过程中读取或写入 ref.current。