react原生中的ref是什么?我应该在什么时候使用ref？

在React中，ref是一个特殊的属性，它允许你直接访问DOM元素或者在组件实例上获取数据。ref提供了一种访问在render方法中创建的DOM节点或者React元素的方式。通常情况下，你应该避免在React中直接操作DOM，而是通过state来控制组件的渲染。但在某些情况下，比如集成第三方DOM库、文本选择或者媒体播放，直接操作DOM是必要的。

基础概念

ref可以是一个回调函数或者一个由React.createRef()创建的ref对象。

回调函数：这个函数会在组件挂载或卸载时被调用，并且传入对应的DOM元素或者组件实例。

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

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

Ref对象：这是一个更简洁的方式来使用ref，适用于类组件和函数组件（使用Hooks）。

class MyComponent extends React.Component {
  myRef = React.createRef();

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

使用场景

管理焦点，文本选择或媒体播放：当你需要直接操作DOM来管理焦点、文本选择或者媒体播放时，可以使用ref。
触发强制动画：有时候你需要手动触发动画，这时可以通过ref获取DOM元素并应用样式变化。
集成第三方DOM库：如果你的React应用需要与第三方非React DOM库集成，ref可以帮助你获取对应的DOM节点。
访问子组件实例：在类组件中，如果你需要访问子组件的实例方法或属性，可以通过ref来实现。

示例代码

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

export default TextInputWithFocusButton;

在这个例子中，我们使用了useRef Hook来创建一个ref，并将其赋值给input元素。当按钮被点击时，我们通过inputEl.current.focus()来使文本框获得焦点。