useRef和useState的区别

useRef的值被修改，不会引起视图的更新，而state的值被修改，会引起视图重新渲染

/**
 * @file
 * useState更新state，会引起子组件的重新渲染
 */
import React, { useState, useRef, useEffect } from 'react';
import { render } from 'react-dom';


const Test1 = ({ log }) => {
    useEffect(() => {
        log()
    }, [log]);

    return <div>子组件</div>;
};

const App = () => {
    // const [count, setCount] = useState(0);
    const countRef = useRef(0);

    const refreshPage = () => {
        // setCount(count + 1);
        countRef.current++;
    };

    const handleLog = () => {
        console.log('打点----')
    };

    return <>
            <div>
                <h1>useRef</h1>
                <button onClick={refreshPage}>全局刷新次数</button>
                {/* <div>当前刷新次数：{count}</div> */}
                <Test1 log={handleLog} />
            </div>
        </>;
};

render(<App />,
    document.getElementById('rooot')
);

forwardRef的使用

forwardRef将DOM节点暴露给父组件(通过父元素将外层ref传递给子元素)

/**
 * @file
 * forwardRef将DOM节点暴露给父组件
 */
import React, { useRef } from 'react';
import { render } from 'react-dom';


const ChildComp = React.forwardRef<HTMLInputElement>((props, childRef) => {

    return <div>
        <input ref={childRef} />
    </div>;
});


const App = () => {
    const parentRef = useRef(null);

    const focusInput = () => {
        parentRef.current?.focus();
    };

    return <>
            <div>
                <h1>useRef</h1>
                <button onClick={focusInput}>Edit</button>
                <ChildComp ref={parentRef} />
            </div>
        </>;
};

render(<App />,
    document.getElementById('rooot')
);