React Refs 完整使用指南

1. Refs 基础用法

1.1 创建和访问 Refs

// 类组件中使用 createRef
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // 访问 DOM 节点
    console.log(this.myRef.current);
  }

  render() {
    return <div ref={this.myRef}>Hello</div>;
  }
}

// 函数组件中使用 useRef
function MyFunctionComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    // 访问 DOM 节点
    console.log(myRef.current);
  }, []);

  return <div ref={myRef}>Hello</div>;
}

1.2 回调 Refs

class CallbackRefComponent extends React.Component {
  setTextInputRef = (element) => {
    this.textInput = element;
  };

  focusTextInput = () => {
    // 直接使用原生 DOM API
    if (this.textInput) this.textInput.focus();
  };

  render() {
    return (
      <>
        <input type="text" ref={this.setTextInputRef} />
        <button onClick={this.focusTextInput}>
          Focus the text input
        </button>
      </>
    );
  }
}

2. Refs 常见用途

2.1 管理焦点

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

  useEffect(() => {
    // 组件挂载时自动聚焦
    inputRef.current.focus();
  }, []);

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

2.2 文本选择

function TextSelection() {
  const textRef = useRef(null);

  const selectText = () => {
    if (textRef.current) {
      textRef.current.select();
    }
  };

  return (
    <div>
      <input
        ref={textRef}
        type="text"
        defaultValue="Click to select me"
      />
      <button onClick={selectText}>Select Text</button>
    </div>
  );
}

2.3 媒体控制

function VideoPlayer() {
  const videoRef = useRef(null);

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

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

  return (
    <div>
      <video ref={videoRef}>
        <source src="video.mp4" type="video/mp4" />
      </video>
      <button onClick={handlePlay}>Play</button>
      <button onClick={handlePause}>Pause</button>
    </div>
  );
}

3. Refs 转发

3.1 基本 Ref 转发

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="fancy-button">
    {props.children}
  </button>
));

// 使用转发的 ref
function Parent() {
  const buttonRef = useRef(null);

  useEffect(() => {
    console.log(buttonRef.current); // 访问 button DOM 节点
  }, []);

  return <FancyButton ref={buttonRef}>Click me!</FancyButton>;
}

3.2 高阶组件中的 Ref 转发

function withLogger(WrappedComponent) {
  class LoggerComponent extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('Props updated', prevProps, this.props);
    }

    render() {
      const {forwardedRef, ...rest} = this.props;
      return <WrappedComponent ref={forwardedRef} {...rest} />;
    }
  }

  return React.forwardRef((props, ref) => {
    return <LoggerComponent {...props} forwardedRef={ref} />;
  });
}

// 使用高阶组件
const ButtonWithLogger = withLogger(FancyButton);

4. Refs 与函数组件

4.1 useImperativeHandle 使用

const FancyInput = React.forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    getValue: () => {
      return inputRef.current.value;
    },
    setValue: (value) => {
      inputRef.current.value = value;
    }
  }));

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

// 使用自定义 ref 方法
function Parent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
    inputRef.current.setValue('Hello!');
    console.log(inputRef.current.getValue());
  };

  return (
    <div>
      <FancyInput ref={inputRef} />
      <button onClick={handleClick}>Manipulate Input</button>
    </div>
  );
}

5. Refs 的高级用法

5.1 多个 Refs 管理

function MultipleRefs() {
  const refs = useRef({});

  const setRef = (id) => (element) => {
    refs.current[id] = element;
  };

  const focusRandom = () => {
    const keys = Object.keys(refs.current);
    const randomKey = keys[Math.floor(Math.random() * keys.length)];
    refs.current[randomKey]?.focus();
  };

  return (
    <div>
      <input ref={setRef('input1')} placeholder="Input 1" />
      <input ref={setRef('input2')} placeholder="Input 2" />
      <input ref={setRef('input3')} placeholder="Input 3" />
      <button onClick={focusRandom}>Focus Random Input</button>
    </div>
  );
}

5.2 条件性 Refs

function ConditionalRef() {
  const [showInput, setShowInput] = useState(true);
  const inputRef = useRef(null);

  useEffect(() => {
    if (showInput) {
      inputRef.current?.focus();
    }
  }, [showInput]);

  return (
    <div>
      <button onClick={() => setShowInput(!showInput)}>
        Toggle Input
      </button>
      {showInput && <input ref={inputRef} />}
    </div>
  );
}

6. Refs 最佳实践

6.1 避免过度使用

// 不推荐
function BadExample() {
  const divRef = useRef(null);

  const updateContent = () => {
    // 不推荐直接操作 DOM
    divRef.current.innerHTML = 'Updated content';
  };

  return <div ref={divRef}>Content</div>;
}

// 推荐
function GoodExample() {
  const [content, setContent] = useState('Content');

  return <div>{content}</div>;
}

6.2 清理 Refs

function CleanupExample() {
  const timerRef = useRef(null);

  useEffect(() => {
    timerRef.current = setInterval(() => {
      console.log('Tick');
    }, 1000);

    // 清理定时器
    return () => {
      clearInterval(timerRef.current);
    };
  }, []);

  return <div>Timer Example</div>;
}

7. 总结

Refs 使用要���：

1. 适用场景：

   • DOM 元素的直接操作
   • 媒体播放控制
   • 文本选择和焦点管理
   • 第三方 DOM 库的集成

2. 注意事项：

   • 避免过度使用 Refs
   • 优先使用声明式编程
   • 及时清理 Refs 资源
   • 谨慎使用 Refs 操作 DOM

3. 性能考虑：

   • Refs 更新不会触发重新渲染
   • 适当使用可以避免不必要的渲染
   • 大量 Refs 可能影响内存使用

4. 开发建议：

   • 优先使用 React 的声明式 API
   • 只在必要时使用 Refs
   • 使用 TypeScript 增加类型安全
   • 保持代码的可维护性
     </rewritten_file>