useImperativeHandle

可以在子组件内部暴露给父组件，句柄父组件可以调子组件的方法，或者访问子组件的属性。如果你学过 Vue，就类似于 Vue 的 defineExpose。

useImperativeHandle(ref, () => {
  return {
    // 暴露给父组件的方法或属性
  }, [deps]);

参数

• ref: 父组件传递的 ref 对象
• createHandle: 返回值，返回一个对象，对象的属性就是子组件暴露给父组件的方法或属性。
• deps?: [可选] 依赖项，当依赖项发生变化时，会重新调用 createHandle 函数，类似于 useEffect 的依赖项。

注意

• React 18 和 19 版本不一样。

执行时机 [第三个参数]

1. 不传入第三个参数:

   • useImperativeHandle 会在组件挂载时执行一次，然后状态更新时，都会执行一次。
   • 示例:

     useImperativeHandle(ref, createHandle);

2. 传入空数组:

   • useImperativeHandle 会在组件挂载时执行一次，然后状态更新时，不会执行。
   • 示例:

     useImperativeHandle(ref, createHandle, []);

3. 传入依赖项:

   • useImperativeHandle 会在组件挂载时执行一次，然后状态更新时，会根据依赖项的变化而决定是否再次执行。
   • 示例:

     useImperativeHandle(ref, createHandle, [deps]);

传入第三个参数	执行时机描述
不传入	useImperativeHandle 会在组件挂载时执行一次，然后状态更新时，都会执行一次
空数组	useImperativeHandle 会在组件挂载时执行一次，然后状态更新时，不会执行
有依赖项	useImperativeHandle 会在组件挂载时执行一次，然后状态更新时，会根据依赖项的变化而决定是否再次执行

useImperativeHandle

FormExample