React 组件三大核心之 ref

文章目录

用法
- React.createRef()
- [useRef Hook](#useRef Hook)
注意

ref 是 React 中的一个重要概念，它用于访问和操作 DOM 元素或者类组件实例。

在React中，ref 提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素。这对于执行DOM操作、读取值、动画、集成第三方DOM库等场景非常有用。

ref 是一种特殊的属性，你可以将它附加到React元素上。当元素被挂载到DOM或卸载时，React会将ref对象上的特定方法作为回调传递给它。这使得可以在生命周期方法或其他React组件的方法中直接访问DOM元素。

直接访问DOM：通过ref，你可以直接访问和操作DOM元素。
访问组件实例：对于类组件，ref也可以用来访问组件的实例。
灵活性：ref可以附加到任何React元素上，包括类组件、函数组件、DOM元素等。

用法

React.createRef()

React提供了 React.createRef() 方法来创建ref，你可以通过函数的形式来访问DOM元素。

js 复制代码

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

  focusInput = () => {
    this.myInput.current.focus(); // 使input获得焦点
    console.log(this.myInput.current.value); // 获取input值
  };

  render() {
    return (
      <div>
       <input ref={this.myInput} type="text" />
       <button onClick={this.focusInput}>Focus Input</button>
      </div>
    );
  }
}

useRef Hook

在函数组件中，还可以使用 useRef Hook 来创建ref。

js 复制代码

import React, { useRef } from 'react';

const MyComponent = () => {
  const myInput = useRef(null);

  const focusInput = () => {
    myInput.current.focus(); // 使input获得焦点
    console.log(myInput.current.value); // 获取input值
  };

  return (
    <div>
     <input ref={myInput} type="text" />
     <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

export default MyComponent;

注意

尽量避免过度使用ref，React的设计哲学是尽可能地避免直接操作DOM。
当ref被附加到一个元素上时，React会在组件挂载时将该元素作为current属性传递给ref。同样地，当元素被卸载时，current值将被设为null。
不要在render方法或任何应该具有纯函数性质的地方使用ref，因为这可能会导致意外的副作用。
对于函数组件，使用React.forwardRef或useRef来创建和使用ref。