Detailed explanation of cross-usage of Ref in React

const Fn = ()=>{
    const testRef = useRef(null);
    console.log('testRef',testRef.current); // Will render twice, the first time prints null, the second time is <div>test</div>
    return (
        <div ref={testRef}>test</div>
    )
}

const Fn = ()=>{
    const testRef = useRef(null);
    // Define Test function component const Test = ({ refs }) => <div ref={refs}>I am ReactDOM test</div>;
    console.log('testRef',testRef.current); // Will render twice, the first time prints null, the second time is <div>I am ReactDOM test</div>
    return (
        {/* The reason why refs is used here instead of ref as prop is because ref will be specially processed by react and will not be passed through to react components as props, similar to key */}
         <Test refs={testRef} /> 
    )
}

import ReactDom from 'react-dom';

const Fn = ()=>{
    const testClassRef = useRef(null);
    // Define the TestClass class component class TestClass extends React.Component {
        render() {
          return (
            <div >
                I am the TestClass component test</div>
          )
        }
    }
    console.log('testClassRef',testClassRef.current); // Will render twice, the first time prints null, the second time is <div>I am a TestClass component test</div>
    return (
        {/* The reason why refs is used here instead of ref as prop is because ref will be specially processed by react and will not be passed through to react components as props, similar to key */}
         <TestClass 
             ref={el => {
                console.log('new render refs')
                testClassRef.current = ReactDom.findDOMNode(el);
             }} 
         /> 
    )
}

import ReactDom from 'react-dom';
import { connect } from 'react-redux';

const Fn = ()=>{
    const testClassRef = useRef(null);
    // Define the TestClass class component class TestClass extends React.Component {
        render() {
          return (
            <div >
                I am the TestClass component test</div>
          )
        }
    }
    //Define the component wrapped by connect of TestClass //forwardRef:true Set redux to allow ref to be passed as props to the component wrapped by connect const TestClassConnect = connect(null, null, null, { forwardRef: true })(TestClass);
    
    console.log('testClassRef',testClassRef.current); // Will render twice, the first time prints null, the second time is <div>I am a TestClass component test</div>
    return (
        {/* The reason why refs is used here instead of ref as prop is because ref will be specially processed by react and will not be passed through to react components as props, similar to key */}
         <TestClassConnect
            ref={el => {
              console.log('new render refs')
              testClassRef.current = ReactDom.findDOMNode(el);
            }}
          />
    )
}