2021-02-05 React useImperativeHa

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

// 实现 ref 的转发
const FancyInput = React.forwardRef((props, ref) => (
  <div>
    <input ref={ref} type="text" />
    <div>我是自定义的函数式组件</div>
  </div>
));

const App = () => {
  const ref = useRef();
  return (
    <div>
      <FancyInput ref={ref} />
      <button onClick={() => {ref.current.focus()}}>
        调用input的focus方法
      </button>
    </div>
  )
}

ReactDOM.render(<App />, 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 (
  <div>
    <input ref={inputRef} type="text" />
    <div>我是自定义的函数式组件</div>
  </div>
 )
});

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

  return (
    <div>
      <FancyInput ref={fancyInputRef} />
      <button onClick={() => {fancyInputRef.current.focus()}}>
        调用FancyInput组件的 focus方法
      </button>
    </div>
  )
}

ReactDOM.render(<App />, root);

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

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