跳到主要内容

Refs与DOM

在React中，组件通常通过props和state来管理数据和UI的更新。然而，有时我们需要直接访问DOM元素，例如聚焦输入框、获取元素尺寸或与第三方DOM库集成。这时，React的Refs就派上用场了。

什么是Refs？​

Refs是React提供的一种机制，允许我们直接访问DOM节点或在React组件实例中存储可变值。通过Refs，我们可以在不触发组件重新渲染的情况下，直接操作DOM元素。

创建Refs​

在函数组件中，我们可以使用useRef钩子来创建Refs。在类组件中，可以使用React.createRef()方法。

jsx
import React, { useRef } from 'react';

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

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

在这个例子中，我们创建了一个inputRef，并将其赋值给<input>元素的ref属性。当点击按钮时，inputRef.current会指向这个<input>元素，并调用focus()方法使其获得焦点。

访问DOM元素​

Refs最常见的用途是访问DOM元素。通过ref.current，我们可以直接操作DOM节点。

jsx
function MyComponent() {
  const divRef = useRef(null);

  const changeColor = () => {
    divRef.current.style.backgroundColor = 'lightblue';
  };

  return (
    <div>
      <div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightcoral' }} />
      <button onClick={changeColor}>Change Color</button>
    </div>
  );
}

在这个例子中，点击按钮会改变<div>的背景颜色。

提示

Refs不仅可以用于DOM元素，还可以用于存储任何可变值。例如，可以用Refs来存储定时器ID或上一次的状态值。

Refs与类组件​

在类组件中，Refs的使用方式略有不同。我们需要使用React.createRef()来创建Refs，并将其赋值给组件的实例属性。

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

  focusInput = () => {
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.focusInput}>Focus Input</button>
      </div>
    );
  }
}

回调Refs​

除了使用useRef或React.createRef()，我们还可以使用回调Refs。回调Refs允许我们在Ref被设置或清除时执行自定义逻辑。

jsx
function MyComponent() {
  let inputRef = null;

  const setInputRef = (element) => {
    inputRef = element;
  };

  const focusInput = () => {
    if (inputRef) {
      inputRef.focus();
    }
  };

  return (
    <div>
      <input type="text" ref={setInputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

在这个例子中，setInputRef函数会在<input>元素挂载时被调用，并将该元素赋值给inputRef变量。

警告

回调Refs在组件更新时会被调用两次：第一次传入null，第二次传入DOM元素。因此，在使用回调Refs时需要注意处理null的情况。

实际应用场景​

表单验证​

Refs可以用于在表单提交时访问输入框的值，并进行验证。

jsx
function LoginForm() {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const email = emailRef.current.value;
    const password = passwordRef.current.value;

    if (!email || !password) {
      alert('Please fill in all fields');
      return;
    }

    // 提交表单逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" ref={emailRef} placeholder="Email" />
      <input type="password" ref={passwordRef} placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  );
}

与第三方库集成​

Refs可以用于与第三方DOM库（如D3.js或jQuery）集成。

jsx
function ChartComponent() {
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      // 使用D3.js绘制图表
      const svg = d3.select(chartRef.current)
        .append('svg')
        .attr('width', 200)
        .attr('height', 200);

      svg.append('circle')
        .attr('cx', 100)
        .attr('cy', 100)
        .attr('r', 50)
        .style('fill', 'lightblue');
    }
  }, []);

  return <div ref={chartRef} />;
}

总结​

Refs是React中一个强大的工具，允许我们直接访问和操作DOM元素。无论是聚焦输入框、获取元素尺寸，还是与第三方库集成，Refs都能派上用场。通过useRef、React.createRef()或回调Refs，我们可以灵活地管理DOM引用。

备注

虽然Refs非常有用，但应尽量避免过度使用。在大多数情况下，React的声明式编程模型已经足够处理UI更新。

附加资源​

练习​

  1. 创建一个组件，使用Refs实现一个自动聚焦的输入框。
  2. 使用Refs实现一个按钮，点击时改变一个<div>的背景颜色。
  3. 尝试使用回调Refs实现一个简单的表单验证功能。