深入理解React中Refs、DOM组件与类组件实例的Ref转发机制

import React, { useRef, useEffect } from 'react';function MyForm() {  const inputRef = useRef(null);  useEffect(() => {    // 在组件挂载后，inputRef.current将指向实际的DOM input元素    if (inputRef.current) {      inputRef.current.focus(); // 自动聚焦    }  }, []);  return (      );}

import React from 'react';class ClassComponent extends React.Component {  focusInput = () => {    // 假设这里有一个内部inputRef，或者直接操作通过props传入的innerRef    if (this.props.innerRef && this.props.innerRef.current) {      this.props.innerRef.current.focus();    } else {      console.log("无法聚焦：innerRef未设置或其current属性为空");    }  };  render() {    // 将父组件通过innerRef传入的ref附加到内部的input元素上    return (          );  }}

import React from 'react';// ClassComponent定义如上// 使用React.forwardRef将Ref转发给ClassComponentconst Input = React.forwardRef(function (props, ref) {  // 这里的ref是父组件传入的，它将被传递给ClassComponent的innerRef属性  return ;});// 父组件如何使用这个转发了Ref的Input组件function ParentComponent() {  const classComponentRef = React.useRef(null);  const handleClick = () => {    if (classComponentRef.current) {      // 这里的classComponentRef.current指向ClassComponent内部的input DOM元素      // 因为ClassComponent直接将innerRef附加到了input上      classComponentRef.current.focus();      classComponentRef.current.value = "已聚焦并设置值";    }  };  return (