React 父组件如何主动“联系”子组件

在典型的 React 数据流中,props是父子组件交互的唯一方式。要修改一个子组件,需要使用新的 props 重新渲染它。但是,在某些情况下,需要在典型数据流之外主动查看或强制修改子组件,这时候就需要使用 Refs,将 DOM Refs 暴露给父组件。

何时使用 Refs

下面是几个适合使用 refs 的情况:

  • 管理焦点,文本选择或媒体播放;
  • 触发强制动画;
  • 集成第三方 DOM 库;
  • 测量子 DOM 节点的大小或位置;
避免使用 refs 来做任何可以通过声明式实现来完成的事情,因为它会打破组件的封装。

Refs 与组件

默认情况下,ref 属性必须指向一个 DOM 元素或 class 组件,不能在函数组件上使用 ref 属性,因为它们没有实例。如果需要在函数组件中使用 ref,可以使用 forwardRef,或者将该组件转化为 class 组件。

React.forwardRef

React.forwardRef(props, ref)

  • 第二个参数 ref 只在使用 React.forwardRef 定义组件时存在。常规函数和 class 组件不接收 ref 参数,且 props 中也不存在 ref
  • Ref 转发不仅限于 DOM 组件,也可以转发 refs 到 class 组件实例中。

Ref 转发

如果使用 16.3 以上版本的 React,使用 ref 转发将 DOM Refs 暴露给父组件。Ref 转发使组件可以像暴露自己的 ref 一样暴露子组件的 ref。如果对子组件的实现没有控制权的话,只能使用 findDOMNode(),但在严格模式下已被废弃且不推荐使用。

实现 Ref 转发方式:

  • ref 和 forwardRef
  • useImperativeHandle 和 forwardRef

ref 和 forwardRef

  • 父组件创建 ref,并向下传递给子组件
  • 子组件通过 forwardRef 来获取传递给它的 ref
  • 子组件拿到 ref并向下转发该ref到自己的某一个元素上
  • 父组件通过 ref.current 获取绑定的 DOM 元素实例

缺点

  • 会把绑定 ref 元素的 DOM 直接暴露给了父组件
  • 父组件拿到 DOM 后可以进行任意的操作

例子

下面的例子使用的是 React 16.6 引入的 useRef Hook,如果是 React 16.3 版本使用 React.createRef() API, 如果更早之前的版本,使用回调形式的refs

// 子组件
import React, { forwardRef, useState } from 'react'

const BaseInfo = forwardRef((props, ref) => {
  console.log('BaseInfo --- props', props)
  console.log('BaseInfo --- ref', ref)

  const [name, setName] = useState('')
  const [age, setAge] = useState('')

  return (
    
姓名: setName(val)} /> 年龄: setAge(val)} />
) })
// 父组件
import React, { useRef } from 'react'
import BaseInfo from './BaseInfo'

function RefTest() {
  const baseInfoRef = useRef(null)

  const getBaseInfo = () => {
    console.log('getBaseInfo --- baseInfoRef', baseInfoRef.current)
  }

  return (
    <>
      
      
    
  )
}

输出

React 父组件如何主动“联系”子组件_第1张图片
点击“获取基本信息”按钮后:
image-20211122112901116.png

useImperativeHandle 和 forwardRef

useImperativeHandle 介绍

useImperativeHandle(ref, createHandle, [deps])

使用 ref 时通过useImperativeHandle自定义暴露给父组件的实例值。

通过 useImperativeHandle, 将父组件传入的 ref 和 useImperativeHandle 第二个参数返回的对象绑定到了一起。

优点

  • 只暴露给父组件需要用到的 DOM 方法;
  • 在父组件中, 调用 xxxRef.current 时,返回的是对象;

例子

// 子组件
const OtherInfo = (props, ref) => {
  console.log('OtherInfo --- props', props)
  console.log('OtherInfo --- ref', ref)

  const inputRef = useRef()
  const [school, setSchool] = useState('')

  useImperativeHandle(ref, () => {
    console.log('useImperativeHandle --- ref', ref)
    return ({
      focus: () => {
        inputRef.current.focus()
      },
      getSchool: () => {
        return inputRef.current.value
      }
    })
  }, [inputRef])

  return (
    
学校: setSchool(val)}/>
) } export default forwardRef(OtherInfo)
// 父组件
import React, { useRef } from 'react'
import OtherInfo from './OtherInfo'

function RefTest() {
  const otherInfoRef = useRef(null)

  const getOtherInfo = () => {
    console.log('getOtherInfo --- otherInfoRef', otherInfoRef.current)
    console.log('getOtherInfo --- otherInfoRef --- getSchool', otherInfoRef.current.getSchool())
  }

  return (
    <>
      
      
    
  )
}

输出
React 父组件如何主动“联系”子组件_第2张图片

你可能感兴趣的