使用CreateRef实现元素的引用**

1. 理解CreateRef：

CreateRef 是React中用于创建引用对象的一个方法，可以将DOM元素或React组件实例作为参数传递。它允许开发者在代码中访问和操作元素的属性和方法，而无需直接使用DOM API。

1.1. 创建引用：

const ref = createRef();

返回： 一个空的ref对象，{current: null}

用途： 将ref对象附加到元素上时，current属性指向该元素的DOM节点。

1.2. 引用元素：

• 函数组件

const MyComponent = () => {
  const inputRef = createRef();

  return (
    <input type="text" ref={inputRef} />
  );
};

• 类组件

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

  render() {
    return (
      <input type="text" ref={this.inputRef} />
    );
  }
}

2. 访问引用：

const input = ref.current;

返回： DOM元素或React组件实例，具体取决于您引用的是什么。

3. 使用引用：

您可以使用引用来访问和操作元素的属性和方法。例如，您可以：

• 获取元素的当前值：input.value
• 设置元素的当前值：input.value = 'new value'
• 调用元素的方法：input.focus()
• 添加或删除事件监听器：input.addEventListener('click', handleClick)

4. 卸载组件时清除引用：

在函数组件中，可以使用useEffect钩子来清除引用。在类组件中，可以在componentWillUnmount生命周期方法中清除引用。

5. 实用示例：

• 使用ref来获取表单元素的当前值。
• 使用ref来控制输入元素的焦点。
• 使用ref来添加或删除事件监听器。

6. 结论：

CreateRef 是React中用于创建引用对象的一个方法，可以将DOM元素或React组件实例作为参数传递。它允许开发者在代码中访问和操作元素的属性和方法，而无需直接使用DOM API。这是一个强大的工具，可以用于各种各样的用例，例如：表单验证、动画、滚动检测和DOM操纵。