React 项目程序中 ref 回调函数实现的方式有哪些

React项目中实现ref回调函数的方式主要有两种：使用传统的回调函数、使用React.createRef()创建的ref。 使用回调函数时，我们在组件的某个元素上定义一个属性，例如ref={(element) => { this.myElement = element; }}，React会在组件挂载时将DOM元素传递给这个回调函数，从而可以保存对这个DOM元素的引用。使用React.createRef()方法则更为简便，它会创建一个容器，该容器可以持有一个可变的当前属性，通常在构造函数中使用this.myRef = React.createRef()创建，然后将this.myRef.current指向React元素。两种方式都可以在组件内部直接访问DOM节点，但createRef方式更符合React的代码风格和未来的优化方向。

我会首先解释传统回调函数的实现方法，随后展开详细地阐述更加现代的createRef方法。

一、传统回调函数

传统的回调ref是React较早之前版本中使用的一种方式，可以直接访问DOM元素或子组件实例。

实现原理

在JSX中，你可以将一个函数赋予ref属性，该函数接收React组件实例或HTML DOM元素作为参数，并将其保存到组件的实例属性中。这个过程一般在componentDidMount或componentDidUpdate生命周期发生后。

应用场景

class MyComponent extends React.Component {
  focusTextInput() {
    // 直接使用原生API使text输入框获得焦点
    if (this.textInput) this.textInput.focus();
  }
  render() {
    // 使用回调函数的方式来引用DOM元素
    return (
      <input
        type="text"
        ref={(input) => { this.textInput = input; }}
      />
    );
  }
}

传统的回调函数方式简单，易于理解，但由于它多用于直接操作DOM，可能会与React的数据流产生冲突。

二、React.createRef方法

React.createRef创建的ref通过更为现代的API让我们能够在整个组件中引用DOM节点或React元素。

实现原理

在构造器中使用React.createRef来创建一个ref对象，并将其赋值给类属性。React会自动通过属性引用在相关DOM元素上填充这个对象的current字段。

应用场景

class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    // 创建一个ref来存储textInput的DOM元素
    this.textInput = React.createRef();
  }
  componentDidMount() {
    // 组件挂载后，通过current属性直接获得DOM节点，并对DOM节点进行操作
    this.textInput.current.focus();
  }
  render() {
    // 通过ref属性将创建的ref关联到DOM元素上
    return (
      <input
        type="text"
        ref={this.textInput}
      />
    );
  }
}

React.createRef是加入React更多版本的一种新特性，与传统方法相比，这种方式的代码更简洁，易于管理。

三、使用Hooks useRef

在React的函数式组件中，useRef Hook是一种获取DOM节点引用的方式，并且它也不会在数据变化时引起组件重新渲染。

实现原理

useRef返回一个可变的ref对象，其.current属性被初始化为传递的参数（initialValue）。返回的对象在组件的整个生命周期内保持不变。

应用场景

function TextInputWithFocusButton() {
  // 使用`useRef`来获取input元素
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current`指向已挂载到DOM上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

在函数式组件中，useRef能够较为方便地替代实例属性。

通过阐述上述三种方法的实现，可知React ref回调函数在React项目程序中实现的方式多样，根据不同的场景和组件类型选择不同的实现方法是非常重要的。对于较新的熟悉Hooks的开发者来说，useRef Hook将是一个较为方便的选择。而对于使用类组件的开发者，则可以选择传统的回调ref或者React.createRef方法来获取对节点的引用。