22-2 useImperativeHandle Hook的使用

:::info useImperativeHandle hook与useRef、forwardRef需要搭配使用。 :::

1、具体的使用案例

import React, { forwardRef, useRef, useImperativeHandle } from 'react';
const Childcpn = forwardRef((props, ref) => {
  // 组建内部的逻辑
  const inputRef = useRef();
  // 处理相应的逻辑 这个的ref是父组件传过来的
  useImperativeHandle(ref, () => ({
    // 这个回调函数 定义了什么函数 在父组件中只能用回调函数 相当于只给父组件暴露一个方法。
    focus: () => {
      // 操作组件内部的属性
      inputRef.current.focus()
    }
  }), [inputRef.current])
  return (
    <>
    <input ref={ inputRef } type="text" />
    </>
  )
})
export default function UseImperativeHandleHookDemo() {
  // 组件内部的属性
  const childRef = useRef()
    // 定义组件本身的行为
  function handleClick() {
    childRef.current.focus()
  }
  return (
    <>
      <Childcpn ref={ childRef }/>
      <button onClick={ handleClick }>按钮</button>
    </>
  );
}

2、原理解析

:::info

• 我们并不希望在父组件中直接对子元素所有的属性进行控制，对子元素的相关操纵，应该是由子组件自己预先定义好，只是把相应得函数或者方法传递给父组件，让父组件调用相关得函数或者方法，那么我们的子组件就是可控的，并不能设计为父元素很容易的控制子元素。
• 核心思想—父组件想操作子组件的属性，应该预先由子组件定义好属性或者方法，只提供给父组件使用，而不用过多的暴露子组件本身的方法与属性。处于安全性与可控性的角度进行考虑。 :::