2021-02-05 React useImperativeHandle 详解

使用函数时组件的时候,ref转发是必须要了解的概念

// 实现 ref 的转发
const FancyInput = React.forwardRef((props, ref) => (
  
我是自定义的函数式组件
));
const App = () => {
  const ref = useRef();
  return (
    
) } ReactDOM.render(, root);

如上,简介明了的解释了ref转发的概念。
但是,上面的 ref 透传的方式有什么问题呢

  • 站在 FancyInput 组件的角度,FancyInput组件在中间层,父组件App 越过了自己,直接获取了自己的子组件 inputref,子组件的DOM直接暴露给了父组件

  • input 组件的所有方法都直接暴露给App,App组件可以进行任意的操作,某些情况的不可控

  • 我们只是希望App可以操作的inputfocus方法,并不希望它随意操作其他方法

useImperativeHandle 就是来解决这个问题的:

const FancyInput = React.forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      // 这里可以加自己的逻辑哦
      inputRef.current.focus();
    }
  }));

 return (
  
我是自定义的函数式组件
) });
const App = props => {
  const fancyInputRef = useRef();

  return (
    
) } ReactDOM.render(, root);

使用 useImperativeHandle 后,FancyInput有自己的 ref,通过 React.forwardRef 将父组件的 ref 透传过来,通过 useImperativeHandle 方法来暴露指定的方法给父组件调用,完美的解决了上面的问题。你还可以自己在 input 的 focus 方法上加一些自己的逻辑或者副作用,是不是有点钩子的意味了。


注意: useImperativeHandle 和 React.forwardRef 必须是配合使用的。

你可能感兴趣的:(2021-02-05 React useImperativeHandle 详解)