useImperativeHandle与useRef的区别是什么？其真正作用是什么？

我知道 useImperativeHandle 可以帮助父组件调用子组件的方法，比如下面这个简单示例：

const Parent = () => {
    const ref = useRef(null);
    const onClick = () => ref.current.focus();

    return <>
        <button onClick={onClick}>触发子组件聚焦</button>
        <FancyInput ref={ref} />
    </>
}

function FancyInput(props, ref) {
    const inputRef = useRef();
    useImperativeHandle(ref, () => ({
      focus: () => {
        inputRef.current.focus();
      }
    }));
    return <input ref={inputRef} />;
}

FancyInput = forwardRef(FancyInput);

但只用 useRef 配合 useEffect 也能实现同样的效果：

const Parent = () => {
    const ref = useRef({});
    const onClick = () => ref.current.focus();

    return <>
        <button onClick={onClick}>触发子组件聚焦</button>
        <FancyInput ref={ref} />
    </>
}

function FancyInput(props, ref) {
    const inputRef = useRef();
    useEffect(() => {
        ref.current.focus = inputRef.current.focus
    }, [])
    return <input ref={inputRef} />;
}

FancyInput = forwardRef(FancyInput);

那 useImperativeHandle 的真正目标到底是什么？

useImperativeHandle 的核心价值 #

虽然手动赋值ref的方式能实现简单功能，但useImperativeHandle解决了手动方式的诸多痛点，它的核心目标包括：

• 保证组件封装性：可以精确控制暴露给父组件的方法/属性，只对外提供需要的命令式接口，避免父组件直接访问子组件内部的其他状态或方法，维护组件的封装边界，防止内部实现细节被外部意外修改。

• 自动处理依赖更新：当子组件内部方法依赖的状态变化时，useImperativeHandle可通过依赖数组自动更新暴露的接口。而手动用useEffect赋值的方式，一旦遗漏依赖，就会导致暴露的方法引用过时，出现难以排查的bug。

• 自动清理避免内存泄漏：useImperativeHandle会在组件卸载时自动清理暴露给父组件的ref接口，而手动赋值的方式如果忘记在组件卸载时清空ref.current的属性，可能会导致父组件持有已卸载组件的方法引用，调用时触发错误或内存泄漏。

• 语义化与可读性：作为React官方提供的Hook，它的语义清晰，其他开发者一眼就能理解这里是在定义子组件对外暴露的命令式接口，相比手动赋值的方式，代码可读性和可维护性更高，团队协作时减少误解。

内容的提问来源于stack exchange，提问作者iamhuynq