动态ref，揭开React中引用DOM元素的秘密

动态ref在React中的力量

React中ref是一个强大的工具，它允许您访问和操作真实的DOM元素。通过使用ref，可以实现许多重要的功能，例如：

• 访问底层DOM元素： 使用ref，可以访问组件挂载的底层DOM元素，这可以用来执行操作（例如获取元素大小或设置焦点）。
• 控制受控组件： 对于受控组件（其状态由React管理），可以利用ref来设置或获取输入字段或文本区域的当前值。
• 控制非受控组件： 对于非受控组件（其状态由DOM管理），可以利用ref来手动控制输入字段或文本区域，并监听其更改事件。
• 优化性能： 通过合理使用ref，可以避免不必要的高阶组件，从而优化React应用程序的性能。

使用动态ref

有两种类型的ref：字符串ref和函数ref，也被称为动态ref。动态ref更强大、更灵活，因为它返回对底层DOM元素的当前引用。

要创建动态ref，可以使用React.createRef()方法，该方法返回一个可变的current属性，该属性最初为null。在组件实例化时，将ref属性与current属性相关联，从而建立对底层DOM元素的引用。

import React, { useRef } from "react";

const MyComponent = () => {
  const inputRef = useRef(null);
  
  return <input ref={inputRef} />;
};

访问DOM元素

使用动态ref后，可以通过访问current属性来获取底层DOM元素：

const inputRef = useRef(null);

useEffect(() => {
  console.log(inputRef.current);  // 打印底层DOM元素
}, []);

控制受控组件

对于受控组件，可以利用动态ref来设置或获取输入值：

const inputRef = useRef(null);

useEffect(() => {
  inputRef.current.value = "初始值";
}, []);

控制非受控组件

对于非受控组件，可以利用动态ref来手动控制输入并监听更改事件：

const inputRef = useRef(null);

useEffect(() => {
  inputRef.current.addEventListener("change", (e) => {
    console.log(e.target.value);
  });
}, []);

性能优化

使用动态ref可以避免使用高阶组件，从而优化React应用程序的性能。例如，如果需要访问DOM元素以获取其大小，可以使用动态ref，而无需创建自定义高阶组件来包装组件。

最佳实践

使用动态ref时，需要遵循一些最佳实践：

• 仅在必要时使用ref。
• 考虑使用函数ref，而不是字符串ref。
• 在组件卸载时，请清除ref以避免内存泄漏。

总结

动态ref是React中一个强大的工具，它允许您访问和操作底层DOM元素。通过理解动态ref的使用，可以实现许多重要的功能，并优化React应用程序的性能。通过遵循最佳实践，可以有效利用动态ref来创建功能强大且高效的应用程序。