React 父组件调用子组件的方法---ref以及forwardRef 与 useImperativeHandle 详解

文章目录

• • React 父组件中如何调用子组件的函数?
  •  Class 组件中使用ref
  • 函数式组件中使用ref
  • 部分结论

React 父组件中如何调用子组件的函数?

方式1.通过ref获取到子组件实例,通过子组件实例调用子组件的方法  

方式2.通过属性传递函数到子组件, 子组件回调该函数将子组件实例以参数的形式传给父

组件并保存在父组件中,父组件拿到子组件实例调用子组件的方法.

这两种方式都很常用，在参数不是很多的情况下我们可以使用第二种方法，然而如果需要的数据很多，那么第二种方式会很麻烦。

现在我们来展开理解一下方式1：首先Class 类组件和函数组件是两种不同的写法；

Class 组件中使用ref

在 React 的 Class 组件中，我们通过 createRef 创建 ref

 在上面的代码实例中，我们使用了 createRef 创建了一个 ref，将其挂到了原生DOM元素 input 上面，这时候，我们就可以通过 ref.current 获取到这个DOM元素，并且可以调用上面的方法。

ref 如果挂载到了一个Class 组件上面，ref.current 获取到的就是这个 Class 组件的实例，也可以访问该 Class组件的方法。当我们将 ref 挂载到该子组件中时，对应的父组件就可以通过 this.ref.current 调用该子组件上面的方法。

函数式组件中使用ref

ref 回调函数 会在组件被挂载之后将组件实例传递给函数，函数组件不同于Class组件，函数组件没有实例。所以在正常情况下，ref 是不能挂载函数组件上的。不过，函数组件是可以创建 ref 的，和类组件不同，函数组件使用 useRef ,然而因为函数式组件是没有实例的，ref的current 指向 null，如果想在函数组件中通过 ref.current 获取 DOM元素或者子组件的实例，是拿不到的；

此时forwardRef（引用传递）应运而生，赋予它透传的功能，让函数式组件可以正常获取到子组件上面的方法，他会创建一个 React 组件，这个组件能够将其接受的 ref 属性转发到父组件中，也即是透传，当然他需要包裹在子组件外面，将父组件的ref当做参数传递给子组件，子组件获取该参数后通过useImperativeHandle将子组件的方法暴露给父组件，这样在外层组件即可调用内层组件中的方法。

在上面的代码实例中，上图侧为父组件，下图为子组件，父组件调用子组件的方法上图标注为5个步骤，总结一下：

使用useRef创建了ref；

2.将ref绑定在子组件上；

3.用forwardRef包裹子组件将该参数和ref转发过来；

4.通过useImperativeHandle将子组件的方法暴露给外层组件；

5.最后可以在外层组件中直接调用。

注意：

forWardRef 的参数必须是 function；

useImperativeHandle 要与 forwardRef 一起使用；

useImperativeHandle ：

第一个参数ref：接收从 forwardRef 传递过来的 ref。

第二个参数：createHandle：处理函数，返回值作为暴露给父组件的 ref 对象。

第三个参数：deps：依赖项 deps，依赖项更改形成新的 ref 对象，可不传

useImperativeHandle 为我们提供了一个类似实例的东西，帮助我们通过 useImperativeHandle 的 第二个参数，将所返回的对象的内容挂载到附件的 ref.current 上

部分结论

综上所述，可以总结以下几点：

原生 DOM 元素：ref的current 指向该节点

class 类组件：ref的current 指向该组件实例

函数式组件：ref的current 指向 null，因为函数式组件没有实例。

createRef 只能用于 Class 类组件中，useRef 只能用在函数式组件中。

createRef 每次渲染都会返回一个新的引用，useRef 每次都会返回相同的引用。

如果函数式组件中使用 createRef 创建的 ref，其值会随着函数式组件的重新执行而不断初始化。