React中useImperativeHandle的作用

useImperativeHandle(ref, createHandle, [deps])

import { forwardRef, useImperativeHandle, useRef, useState } from 'react';

// 子组件
const CustomInput = forwardRef((props, ref) => {
  const [value, setValue] = useState('');
  const inputRef = useRef(null);
  
  // 只暴露 focus 和 validate 方法给父组件
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    validate: () => {
      if (!value.trim()) {
        alert('输入不能为空');
        return false;
      }
      return true;
    },
    getValue: () => value
  }), [value]);
  
  return (
    <input
      ref={inputRef}
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="请输入内容..."
    />
  );
});

// 父组件
function App() {
  const inputRef = useRef(null);
  
  const handleClick = () => {
    // 父组件只能调用通过 useImperativeHandle 暴露的方法
    inputRef.current?.focus();
    const isValid = inputRef.current?.validate();
    if (isValid) {
      console.log('提交的值:', inputRef.current?.getValue());
    }
  };
  
  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={handleClick}>提交并验证</button>
    </div>
  );
}

const Child = forwardRef((props, ref) => {
  return <input ref={ref} />;
});

// 父组件可以直接操作 input DOM
const parent = () => {
  const ref = useRef();
  ref.current?.focus();        // ✅ 可以
  ref.current?.value = 'xxx';  // ✅ 可以（但破坏了数据流）
  ref.current?.style.color = 'red'; // ✅ 可以（破坏了封装）
}

const Child = forwardRef((props, ref) => {
  const inputRef = useRef();
  
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    // 故意不暴露 value 属性，强制使用 props 控制数据
  }));
  
  return <input ref={inputRef} />;
});

// 父组件只能调用暴露的方法
const parent = () => {
  const ref = useRef();
  ref.current?.focus();        // ✅ 可以
  ref.current?.value = 'xxx';  // ❌ undefined，无法直接修改
}