React世界里妙用Ref探秘之旅

2023-11-15 12:13:54

Ref简介：DOM操作的利器

Ref在React中扮演着DOM操作的利器角色，它可以帮助我们获取DOM元素的引用，进而实现对元素的控制和操作。通过Ref，我们可以完成诸如聚焦输入框、控制子组件、获取元素位置和尺寸等操作。

类组件中的Ref用法：传统之道

在类组件中，我们可以通过在组件的render方法中使用React.createRef()方法来创建Ref对象。如下代码所示：

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

  componentDidMount() {
    // 使用Ref获取DOM元素
    const inputElement = this.inputRef.current;
    // 对DOM元素进行操作
    inputElement.focus();
  }

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

函数组件中的Ref用法：钩子的力量

在函数组件中，我们可以借助useRef()钩子来创建Ref对象。useRef()钩子返回一个可变Ref对象，该对象具有.current属性，指向DOM元素或其他值。如下代码所示：

function MyComponent() {
  const inputRef = useRef();

  useEffect(() => {
    // 使用Ref获取DOM元素
    const inputElement = inputRef.current;
    // 对DOM元素进行操作
    inputElement.focus();
  }, []);

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