React 中的 Refs：直接访问 DOM 元素或组件实例的机制

React 中的 refs 是一种用于直接访问 DOM 元素或 React 组件实例的机制。它提供了一种绕过 React 的声明式渲染模型，直接操作底层 DOM 或组件实例的方式。refs 在某些特定场景下非常有用，但应谨慎使用，因为它打破了 React 的数据流模型。

1. Refs 的基本概念

• Refs 的作用：refs 允许你直接访问 DOM 节点或 React 组件实例。通常情况下，React 的声明式编程模型已经足够处理大多数场景，但在某些情况下，直接操作 DOM 是必要的。
• Refs 的创建：在函数组件中，通常使用 useRef Hook 来创建 refs；在类组件中，可以使用 React.createRef() 或回调 refs。

2. Refs 的使用场景

refs 的使用场景通常包括以下几种：

2.1 直接操作 DOM 元素

• 焦点管理：自动聚焦输入框或表单元素。

  function AutoFocusInput() {
    const inputRef = useRef(null);
  
    useEffect(() => {
      inputRef.current.focus();
    }, []);
  
    return <input ref={inputRef} type="text" />;
  }
  

• 媒体播放控制：直接控制 <video> 或 <audio> 元素的播放、暂停等操作。

  function VideoPlayer() {
    const videoRef = useRef(null);
  
    const playVideo = () => {
      videoRef.current.play();
    };
  
    return (
      <div>
        <video ref={videoRef} src="video.mp4" />
        <button onClick={playVideo}>Play</button>
      </div>
    );
  }
  

2.2 访问子组件的实例

• 类组件实例：在父组件中访问子组件的实例方法或状态。

  class Child extends React.Component {
    doSomething() {
      console.log('Child method called');
    }
  
    render() {
      return <div>Child Component</div>;
    }
  }
  
  class Parent extends React.Component {
    constructor(props) {
      super(props);
      this.childRef = React.createRef();
    }
  
    handleClick = () => {
      this.childRef.current.doSomething();
    };
  
    render() {
      return (
        <div>
          <Child ref={this.childRef} />
          <button onClick={this.handleClick}>Call Child Method</button>
        </div>
      );
    }
  }
  

2.3 测量 DOM 元素的尺寸或位置

• 获取 DOM 元素的尺寸：使用 refs 获取 DOM 元素的宽度、高度或位置信息。

  function MeasureElement() {
    const divRef = useRef(null);
  
    useEffect(() => {
      const rect = divRef.current.getBoundingClientRect();
      console.log('Width:', rect.width, 'Height:', rect.height);
    }, []);
  
    return <div ref={divRef}>Measure me!</div>;
  }
  

2.4 集成第三方 DOM 库

• 与第三方库集成：某些第三方库（如 D3.js、Three.js）需要直接操作 DOM 元素，此时可以使用 refs。

  function Chart() {
    const chartRef = useRef(null);
  
    useEffect(() => {
      const svgElement = d3.select(chartRef.current);
      // 使用 D3.js 绘制图表
    }, []);
  
    return <svg ref={chartRef}></svg>;
  }
  

3. Refs 的注意事项

• 避免过度使用：refs 打破了 React 的声明式编程模型，应尽量避免在不需要直接操作 DOM 的场景中使用。
• 函数组件中的 useRef：在函数组件中，useRef 创建的 ref 对象在组件的整个生命周期内保持不变，即使组件重新渲染，ref 也不会被重置。
• 类组件中的 createRef：在类组件中，每次渲染时 React.createRef() 都会创建一个新的 ref 对象，因此通常将其放在构造函数中。
• 回调 Refs：回调 refs 是一种更灵活的方式，允许你在 ref 被设置或清除时执行自定义逻辑。

  function CallbackRef() {
    const handleRef = (node) => {
      if (node) {
        console.log('DOM node:', node);
      }
    };
  
    return <div ref={handleRef}>Callback Ref</div>;
  }
  

4. 总结

refs 是 React 中用于直接访问 DOM 元素或组件实例的工具，适用于焦点管理、媒体控制、测量 DOM 尺寸、集成第三方库等场景。尽管 refs 提供了强大的功能，但应谨慎使用，避免破坏 React 的声明式编程模型。在函数组件中，推荐使用 useRef；在类组件中，可以使用 React.createRef() 或回调 refs。