关于react.js:重学React-React-Hooks之useImperativeHandle

30次阅读

共计 1316 个字符，预计需要花费 4 分钟才能阅读完成。

useImperativeHandle常与 forwardRef 和ref一起应用，所以须要了解后两者的根底用法。能够通过以下两个示例代码，疾速理解 ref 和forwardRef的应用办法。

Demo1: 在 Class 和 Functional 函数中应用 ref . 该示例展现了 ref 的用法，同时表明不通过 forwardRef 封装的子组件，无奈将 ref 传给父组件。
Demo2: farwardRef 转发 ref. 该示例展现了 farwardRef 的用法，父组件 ForwardButton 胜利获取到子组件 RefInFunctionalComponent 的ref

官网说

useImperativeHandle customizes the instance value that is exposed to parent components when using ref

怎么了解呢？

当父组件通过 forwardRef 属性，失去子组件的 ref 时，它只失去一个可读的对象。而 useImperativeHandle 配合 forwardRef 来应用，则给予了批改 ref 的能力，比方为 ref 减少自定义办法。

这种在父组件中间接调用子组件 ref 函数的办法，一点都不 React，所以 React 并不举荐。然而为了不便第三方库的开发，则须要提供这种自定义 ref 的能力。

咱们在 Demo2 的根底上批改一下代码，看看 useImperativeHandle 如何工作。

批改子组件 RefInFunctionalComponent，新增useImperativeHandle 代码块，自定义 getContent 办法，如下:

const RefInFunctionalComponent = (props, ref) => {const innerRef = useRef(null)
  useImperativeHandle(ref, () => ({getContent: () => innerRef.current.innerText
  }))
  const handleClick1 = () => {console.log(ref.current.innerText)
  }
  return <button ref={innerRef} onClick={handleClick1}>{props.children}</button>
}
const ForwardButton = forwardRef(RefInFunctionalComponent)

在父组件中应用ForwardButton:

const App = () => {const ref = useRef(null)
  const handleClick = () => {console.log(ref.current.getContent()) // 按钮 1
  }
  return (
    <div className="wrapper">
      <ForwardButton ref={ref}> 按钮 1 </ForwardButton>
      <button onClick={handleClick}> 获取 button1</button>
    </div>
  );
};

Demo3：残缺示例代码。