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方法来获取对节点的引用。

相关问答FAQs：

Q: 如何在 React 项目中使用 ref 回调函数实现功能？

A: 使用 ref 回调函数是一种在 React 项目中访问和操作 DOM 元素的常用方法。以下是几种实现方式：

1. 使用回调函数： 在类组件中，使用 ref 属性并将回调函数作为其值。在回调函数中，可以引用 DOM 元素并执行相应的操作。

2. 创建 Ref 对象： 使用 React.createRef() 方法创建一个 Ref 对象，然后将其分配给要引用的 DOM 元素。通过访问 ref.current 属性，可以在组件中访问和操作该 DOM 元素。

3. 使用 Hooks： 在函数组件中，可以使用 useRef() 钩子来创建并初始化一个 ref 对象。然后，可以将该 ref 对象分配给要引用的 DOM 元素，并在组件中访问和操作它。

请记住，在使用 ref 回调函数时要小心处理可能的副作用，并避免在 render 方法中访问 ref 对象，以免引起错误。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。