React Refs 如何修改 DOM

在 React 中，refs 是一种用于直接访问 DOM 元素或 React 组件实例的机制。通常情况下，React 推荐使用声明式的方式来操作 DOM，但在某些情况下，直接操作 DOM 是必要的。本文将详细介绍如何使用 refs 来修改 DOM，并探讨其使用场景和注意事项。

1. 什么是 Refs？

Refs 是 React 提供的一种机制，允许你直接访问 DOM 节点或 React 组件实例。通过 refs，你可以在不通过 state 或 props 的情况下，直接操作 DOM 元素。

1.1 使用场景

• 焦点管理：在表单中自动聚焦到某个输入框。
• 媒体播放：控制视频或音频的播放、暂停等操作。
• 动画：直接操作 DOM 元素来实现复杂的动画效果。
• 集成第三方库：与一些需要直接操作 DOM 的第三方库（如 D3.js、jQuery 等）集成。

1.2 创建 Refs

在 React 中，你可以通过 React.createRef() 或 useRef() 钩子来创建 refs。

1.2.1 使用 React.createRef()

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

  componentDidMount() {
    this.myRef.current.focus();
  }

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

1.2.2 使用 useRef() 钩子

function MyComponent() {
  const myRef = React.useRef(null);

  React.useEffect(() => {
    myRef.current.focus();
  }, []);

  return <input type="text" ref={myRef} />;
}

2. 修改 DOM 元素

通过 refs，你可以直接访问 DOM 元素并对其进行修改。以下是一些常见的操作：

2.1 修改样式

你可以通过 ref 直接修改 DOM 元素的样式。

function MyComponent() {
  const myRef = React.useRef(null);

  const changeColor = () => {
    myRef.current.style.backgroundColor = 'yellow';
  };

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

2.2 修改内容

你可以通过 ref 直接修改 DOM 元素的内容。

function MyComponent() {
  const myRef = React.useRef(null);

  const changeText = () => {
    myRef.current.textContent = 'Hello, World!';
  };

  return (
    <div>
      <div ref={myRef}>Click the button to change this text.</div>
      <button onClick={changeText}>Change Text</button>
    </div>
  );
}

2.3 添加或移除类名

你可以通过 ref 动态添加或移除 DOM 元素的类名。

function MyComponent() {
  const myRef = React.useRef(null);

  const toggleClass = () => {
    myRef.current.classList.toggle('active');
  };

  return (
    <div>
      <div ref={myRef} className="box">Click the button to toggle the class.</div>
      <button onClick={toggleClass}>Toggle Class</button>
    </div>
  );
}

2.4 控制媒体播放

你可以通过 ref 控制视频或音频的播放、暂停等操作。

function MyComponent() {
  const videoRef = React.useRef(null);

  const playVideo = () => {
    videoRef.current.play();
  };

  const pauseVideo = () => {
    videoRef.current.pause();
  };

  return (
    <div>
      <video ref={videoRef} width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <button onClick={playVideo}>Play</button>
      <button onClick={pauseVideo}>Pause</button>
    </div>
  );
}

3. 注意事项

虽然 refs 提供了直接操作 DOM 的能力，但在使用时需要注意以下几点：

3.1 避免过度使用

React 的核心思想是通过 state 和 props 来管理组件的状态和渲染。过度使用 refs 可能会导致代码难以维护和理解。只有在确实需要直接操作 DOM 时才使用 refs。

3.2 避免在渲染期间访问 refs

在组件的 render 方法中访问 refs 是不安全的，因为此时 refs 可能还没有被赋值。应该在 componentDidMount 或 useEffect 等生命周期钩子中访问 refs。

3.3 避免直接修改 DOM

直接修改 DOM 可能会导致 React 的虚拟 DOM 与实际 DOM 不一致，从而引发不可预见的错误。尽量通过 state 和 props 来管理 DOM 的变化。

3.4 使用回调 Refs

在某些情况下，你可能需要在组件挂载或卸载时执行一些操作。这时可以使用回调 refs。

function MyComponent() {
  const handleRef = (node) => {
    if (node) {
      node.focus();
    }
  };

  return <input type="text" ref={handleRef} />;
}

4. 总结

Refs 是 React 中一种强大的工具，允许你直接访问和操作 DOM 元素。通过 refs，你可以实现一些在声明式编程中难以实现的功能，如焦点管理、媒体控制、动画等。然而，refs 应该谨慎使用，避免过度依赖直接操作 DOM，以保持代码的可维护性和一致性。

在实际开发中，尽量通过 state 和 props 来管理组件的状态和渲染，只有在确实需要直接操作 DOM 时才使用 refs。通过合理使用 refs，你可以在 React 中实现更复杂和灵活的功能。