React 组件三大核心之 ref

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元素。

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。

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。