React createRef() 与回调引用。使用其中一种比另一种有什么优势吗

JS

React中的ref是用于访问在render方法中创建的React元素的方法。在React中，我们可以使用两种不同的方法来创建ref：createRef()和回调引用。

createRef()是一个React API，它返回一个可用于引用React元素的对象。我们可以在类组件中使用createRef()方法来创建一个ref对象，并将其赋值给一个类属性。然后，我们可以通过访问ref.current来引用该元素。createRef()是React 16.3版本之后引入的一种新的ref创建方式。

回调引用是一种在React中创建ref的旧有方式。它通过在元素上设置ref属性为一个回调函数来实现。这个回调函数在组件挂载时会被调用，并且会接收一个参数，这个参数就是组件的实例或者DOM元素。我们可以在回调函数中将这个实例或者DOM元素存储在一个变量中以供后续使用。

使用createRef()比回调引用有一些明显的优势。首先，使用createRef()更加直观和简洁。我们只需要在组件的构造函数中创建一个ref对象，然后就可以在整个组件中使用它。而回调引用需要我们在每个需要使用ref的地方都要定义一个回调函数，增加了代码的复杂性和可读性。

另一个优势是createRef()可以在函数组件中使用，而回调引用只能在类组件中使用。这使得在函数组件中访问DOM元素变得更加简单和方便。

此外，createRef()还提供了一些其他功能，比如可以在ref对象上调用current属性来获取最新的DOM元素，以及可以在ref对象上调用其他方法来执行一些操作。这些功能在某些场景下非常有用，比如需要获取DOM元素的尺寸或者执行一些特定的操作。

案例代码：

下面是一个使用createRef()的示例代码：

JSx
import React, { Component, createRef } from 'react';
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = createRef();
  }
  componentDidMount() {
    console.log(this.myRef.current); // 输出DOM元素
  }
  render() {
    return <div ref={this.myRef}>Hello World!</div>;
  }
}
export default MyComponent;

在上面的代码中，我们在构造函数中使用createRef()方法创建了一个ref对象，并将其赋值给this.myRef属性。然后，我们在render方法中将这个ref对象通过ref属性绑定到了一个div元素上。在组件挂载完成后，我们可以通过访问this.myRef.current来获取到这个div元素的引用，并进行一些操作。

使用回调引用的示例代码如下：

JSx
import React, { Component } from 'react';
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = null;
  }
  componentDidMount() {
    console.log(this.myRef); // 输出DOM元素
  }
  render() {
    return <div ref={ref => this.myRef = ref}>Hello World!</div>;
  }
}
export default MyComponent;

在上面的代码中，我们创建了一个类属性this.myRef，并在render方法中将这个属性通过回调函数的方式绑定到了一个div元素上。在组件挂载完成后，这个回调函数会被调用，并将这个div元素的引用作为参数传递给回调函数，我们可以将这个引用存储在this.myRef属性中，并进行一些操作。

通过比较这两种方式的代码，我们可以清楚地看到使用createRef()相比回调引用更加简洁和直观，尤其是在需要多次访问同一个元素的时候。而对于简单的场景，回调引用也是一种可行的选择。