2021-02-05 React useImperativeHandle 详解

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

// 实现 ref 的转发
const FancyInput = React.forwardRef((props, ref) => (
  

    
    
我是自定义的函数式组件
  
));

const App = () => {
  const ref = useRef();
  return (
    

      
       {ref.current.focus()}}>
        调用input的focus方法
      
    
  )
}

ReactDOM.render(, root);

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

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

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

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

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

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

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

 return (
  

    
    
我是自定义的函数式组件
  
 )
});

const App = props => {
  const fancyInputRef = useRef();

  return (
    

      
       {fancyInputRef.current.focus()}}>
        调用FancyInput组件的 focus方法
      
    
  )
}

ReactDOM.render(, root);

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

---

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