reactref、createRef、React.forwardRef分别是什么意思使用

一、react中ref、createRef、React.forwardRef

（1）Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的。但其对某些组件，尤其是可重用的组件库是很有用的。
（2）React.forwardRef(render)的返回值是react组件，接收的参数是一个 render函数，函数签名为render(props, ref)，第二个参数将其接受的 ref 属性转发到render返回的组件中。
这项技术并不常见，但在以下两种场景中特别有用:
1）转发 ref 到组件内部的DOM 节点上
2）在高阶组件中转发ref
现在有这样一个场景，我需要得到一个dom元素的值（不使用useState），需要使用一个类组件的方法，需要操作一个函数组件中的dom元素，那么应该怎么做呢？

1. 通过ref操作dom元素或者获取dom元素的值

思路流程及代码如下（示例）：(当然，一般操作dom经常用useRef来初始化)

import React from 'react'
import { ReactDOM } from 'react-dom'
//  一、通过ref操作dom元素或者获取dom元素的值
class Form extends React.Component {
  constructor(props) {
    super(props)
    //1.声明ref方法，实际上是得到{current:null}
    this.firstInputRef = React.createRef(null)
    this.secondInputRef = React.createRef(null)
    this.resultInputRef = React.createRef(null)
  }
  onClickAdd = () => {//3.此时InputRef下的current就是dom元素了，
                      //调current可以直接使用dom元素的value了
    this.resultInputRef.current.value = this.firstInputRef.current.value   this.secondInputRef.current.value
  }
  render () {
    return (
      <div>
        {/* 2.渲染时，把current.null（inputRef）给这个ref，ref挂载到dom元素上，
         //此时null替换成了对应的dom元素 */}
        <input type="text" ref={this.firstInputRef} />
        <span>   </span>
        <input type="text" ref={this.secondInputRef} />
        <button onClick={this.onClickAdd}> = </button>
        <input type="text" ref={this.resultInputRef} />
      </div>
    )
  }
}

2. 通过ref操作类组件实例来获取类组件的方法或者操作类组件

思路流程及代码如下（示例）：

import React from 'react'
import { ReactDOM } from 'react-dom'
//  二、通过ref操作类组件实例来获取类组件的方法或者操作类组件
class Form extends React.Component {
  constructor(props) {
    super(props)
    //1.声明ref方法，实际上是得到{current:null}
    this.inputRef = React.createRef(null)

  }
  //3.此时inputRef下的current就是Input类组件实例，因为是Input类实例，
  //所以可以使用实例下的方法（onFocus1,此方法有可以聚焦focus()）
  onFocus = () => {
    this.inputRef.current.focus()
  }
  render () {
    return (
      <div>
        {/* 2.渲染时，把current.null（inputRef）给这个ref，
        ref挂载到Input类组件实例ref属性上，此时null替换成了类的实例 */}
        <Input type="text" ref={this.inputRef} />
        <button onClick={this.onFocus}>聚焦</button>
      </div>
    )
  }
}
//类组件Input
class Input extends React.Component {
  constructor(props) {
    super(props)
    //4.声明ref方法，实际上是得到{current:null}
    this.InputRef = React.createRef(null)

  }
  onFocus1 = () => {//6.此时InputRef下的current就是dom元素了，可以直接使用dom元素的聚焦方法了
      this.InputRef.current.focus();
  }
  render () {
    return (
      <div>
        {/* 5.渲染时，把current.null（InputRef）给这个ref，
        ref挂载到dom元素上，此时null替换成了对应的dom元素 */}
        <input type="text" ref={this.InputRef} />
      </div>
    )
  }
}

3. 通过ref操作函数式组件

思路流程及代码如下（示例）：

import React from 'react'
import { ReactDOM } from 'react-dom'
//  三、通过ref操作函数式组件
class Form extends React.Component {
  constructor(props) {
    super(props)
    //1.声明ref方法，实际上是得到{current:null}
    this.inputRef = React.createRef(null)

  }
  //4.此时inputRef下的current就是Input函数式组件，
  //Input函数式组件可以通过ref拿到dom元素，然后就可以调用真实dom元素聚焦方法
  onFocus = () => {
    this.inputRef.current.focus()
  }
  render () {
    return (
      <div>
        {/* 2.渲染时，把current.null（inputRef）给这个ref，
        ref挂载到Iput函数式组件上，此时null替换成了函数式组件 */}
        <Input type="text" ref={this.inputRef} />
        <button onClick={this.onFocus}>聚焦</button>
      </div>
    )
  }
}
//函数式组件,必须使用React.forwardRef()包裹
const Iuput =React.forwardRef((props,ref)=>{
  return (
    <div>
      {/* 3.渲染时，React.forwardRef()将ref向下传递，传递到函数式组件ref上，
      此时null替换成了对应的dom元素 */}
      <input type="text" ref={ref} />
    </div>
  )
})

父组件操作子组件的ref，操作子组件的dom

这篇好文章是转载于：学新通技术网