ReactJS 中 useRef 和 createRef 的区别

在 ReactJS 中，除了使用状态和属性来保存数据以外，还可以使用 ref 来保存组件实例或 DOM 元素的引用。ReactJS 提供了两种使用 ref 的方法：useRef 和 createRef。

useRef

useRef 是 ReactJS hooks 的一部分，用于在函数组件中保存可变值，并且这些值的改变不会导致组件重新渲染。如果你以前使用过类组件，那么 useRef 可以看作是 this.refs 的替代品，但是更加灵活和强大。

import { useRef } from 'react';

function TodoForm({ onAdd }) {
  const inputRef = useRef(null);

  function handleSubmit(event) {
    event.preventDefault();
    const inputValue = inputRef.current.value;
    onAdd(inputValue);
    inputRef.current.value = '';
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Add</button>
    </form>
  );
}

在上面的示例中，我们使用 useRef 创建了一个 inputRef 引用，并将其传递给了 input 元素的 ref 属性。这样，我们就可以在表单提交时获取 input 元素的值，并且在处理完数据后，清空表单的值。

值得注意的是，useRef 返回的是一个对象，其中的 current 属性指向传递给 useRef 的参数值。在组件的整个生命周期中，这个对象的引用都是不变的。

createRef

createRef 是 ReactJS 类组件中使用 ref 的一种方式（函数组件中也是可以使用，但相对来说相对麻烦一些）。使用 createRef 时，需要在类组件的构造函数中进行初始化，并在需要使用 ref 的元素上使用。

import React from 'react';

class TodoForm extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const inputValue = this.inputRef.current.value;
    this.props.onAdd(inputValue);
    this.inputRef.current.value = '';
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.inputRef} />
        <button type="submit">Add</button>
      </form>
    );
  }
}

在上面的示例中，我们使用 createRef 创建了一个 inputRef 引用，并在 render 方法中将其传递给了 input 元素的 ref 属性。这样，我们就可以在表单提交时获取 input 元素的值，并且在处理完数据后，清空表单的值。

两种方式的使用方法很相似，但 createRef 只能在类组件中使用，而 useRef 可以在函数组件中使用，并且更加灵活和强大。因此，在更多的场景中，我们更推荐使用 useRef。