react学习—ref转发

一、ref转发

前面我们将ref时提到了，ref并不能作用于函数组件，因为react觉得函数组件只返回一个dom并没有多大意义。那么如果我们一定要对函数组件使用ref怎么办呢？

1、函数组件转发

import React, {
      Component } from 'react'

function A(props) {
     
  return (
    <div>
      <span>{
     props.words}</span>
    </div>
  )
}

export default class App extends Component {
     
  hRef = React.createRef()
  ARef = React.createRef()
  componentDidMount() {
     
    console.log(this);
  }
  
  render() {
     
    return (
      <div>
        <A ref={
     this.ARef} words="abcd" />
        <h1 ref={
     this.hRef}>类组件</h1>
      </div>
    )
  }
}

此时我们声明两个ref绑定在函数组件A和h1标签上，果然系统提示ref不能作用于函数组件，而输出结果也显示只有h1

通过ref转发后

import React, {
      Component } from 'react'

function A(props, ref) {
     
  return (
    <div>
      <span ref={
     ref}>{
     props.words}</span>// 将传进来的ref绑定在span上
    </div>
  )
}
//传递函数组件A，得到一个新组件NewA
const NewA = React.forwardRef(A)
export default class App extends Component {
     
  hRef = React.createRef()
  ARef = React.createRef()
  componentDidMount() {
     
    console.log(this);
  }
  
  render() {
     
    return (
      <div>
        <NewA ref={
     this.ARef} words="abcd" />
        <h1 ref={
     this.hRef}>类组件</h1>
      </div>
    )
  }
}

forwardRef方法：
1. 参数，传递的是函数组件，不能是类组件，并且，函数组件需要有第二个参数来得到ref
2. 返回值，返回一个新的组件

2、类组件转发

import React, {
      Component } from 'react'

class A extends Component {
     
  render() {
     
    return (
      <div>
        <span ref={
     this.props.ref1}>{
     this.props.words}</span>
      </div>
    )
  }
}
export default class App extends Component {
     
  hRef = React.createRef()
  ARef = React.createRef()
  componentDidMount() {
     
    console.log(this);
  }
  render() {
     
    return (
      <div>
        <A ref1={
     this.ARef} words="abcd" />
        <h1 ref={
     this.hRef}>类组件</h1>
      </div>
    )
  }
}

类组件中我们可以通过属性的方式传递ref（ref不是属性），但这明显不是我们想要的转发。

这里我们可以利用forwardRef通过函数的方式返回类组件A，从而实现转发

import React, {
      Component } from 'react'

class A extends Component {
     
  render() {
     
    return (
      <div>
        <span ref={
     this.props.abc}>{
     this.props.words}</span>
      </div>
    )
  }
}
const NewA = React.forwardRef((props, ref) => {
     
  return <A {
     ...props} abc={
     ref} />
})
export default class App extends Component {
     
  hRef = React.createRef()
  ARef = React.createRef()
  componentDidMount() {
     
    console.log(this);
  }
  render() {
     
    return (
      <div>
        <NewA ref={
     this.ARef} words="abcd" />
        <h1 ref={
     this.hRef}>类组件</h1>
      </div>
    )
  }
}

那么通过转发我们可以做什么呢？

3、实例

在前面我们学习了高阶组件，那么我们如果直接对高阶组件使用ref会怎么样。

import React from 'react'
import {
      A } from "./components/Comps";
import withLog from "./HOC/withLog";
let AComp = withLog(A);
export default class App extends React.Component {
     
    myRef = React.createRef();

    componentDidMount() {
     
        console.log(this.myRef);
    }
    render() {
     
        return (
            <div>
                <AComp ref={
     this.myRef} isLogin a={
     1} />
            </div>
        )
    }
}

高阶组件withLog中我们只是想对A组件进行功能增能，但是后续使用中我们仍然想对A组件使用ref怎么办呢？

import React from "react"

/**
 * 高阶组件
 * @param {*} comp 组件
 */
export default function withLog(Comp) {
     
    class LogWrapper extends React.Component {
     
        componentDidMount() {
     
            console.log(`日志：组件${
       Comp.name}被创建了！${
       Date.now()}`);
        }
        componentWillUnmount() {
     
            console.log(`日志：组件${
       Comp.name}被销毁了！${
       Date.now()}`);
        }
        render() {
     
            //正常的属性
            //forwardRef代表要转发的ref  {current:null}
            const {
      forwardRef, ...rest } = this.props;
            return (
                <>
                    <Comp ref={
     forwardRef} {
     ...rest} />
                </>
            )
        }
    }
    return React.forwardRef((props, ref) => {
     
        return <LogWrapper {
     ...props} forwardRef={
     ref} />
    })
}

通过转发就可以做到了。