社区首页 >专栏 >React的三大属性之refs的一些简单理解

React的三大属性之refs的一些简单理解

原创

henu_Newxc03

发布于 2021-12-26 04:54:32

87300

代码可运行

文章被收录于专栏：Newxc03的前端之路Newxc03的前端之路

运行总次数：0

代码可运行

什么是refs?

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。 Ref转发是一项将ref自动通过组件传递到子组件的技巧。通常用来获取DOM节点或者React元素实例的工具。在React中Refs提供了一种方式，允许用户访问dom节点或者在render方法中创建的React元素。

refs的使用场景

在某些情况下，我们需要在典型数据流之外强制修改子组件，被修改的子组件可能是一个 React 组件的实例，也可能是一个 DOM 元素，例如:

管理焦点，文本选择或媒体播放。
触发强制动画。
集成第三方 DOM 库。

如何使用refs？

方式一： createRef （>= React16.3）

一般在构造函数中将refs分配给实例属性，以供组件的其它方法中使用

//对于HTML elements：可以获取元素实例

class App extends React.Component{
    constructor(props) {
        super(props);
   //一般来说，我们需要在constructor里面初始化一个ref，然后就能在return里用了
        this.myRef = React.createRef();
        console.log(this.myRef)
      }
      componentDidMount(){
        this.myRef.current.innerHTML = '赛亚人'
      }
      render() {
        return <div ref={this.myRef} />;
      }
}

//上面的this.myRef有一个current属性：

//如果ref属性被用于html元素，那么它的值是底层DOM元素。

//对于Class Components：可以获取组件类的实例

class App extends React.Component{
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
        console.log(this.myRef)
      }
      componentDidMount(){
        this.myRef.current.bianshen() // 也就是说，可以允许父组件调用子组件的方法
      }
      render() {
        return <Children ref={this.myRef} />;
      }
}
class Children extends React.Component{
    bianshen(){
        console.log('超级赛亚人变身')
    }
      render() {
        return <span>超级赛亚人变身</span>;
      }
}

//上面的this.myRef有一个current属性：

//如果ref属性被用于自定义类组件，那么它的值是已挂载的这个自定义类组件的实例。

提示：对于Function Components：无法获取

方式二：回调Refs

React 将在组件挂载时，会调用 ref 回调函数并传入 DOM 元素，当卸载时调用它并传入 null。在 componentDidMount 或 componentDidUpdate 触发前，React 会保证 refs 一定是最新的。

class App extends React.Component{
    constructor(props) {
        super(props);
        this.targetRef = null
        this.myRef = (e)=> this.targetRef = e;
      }
      componentDidMount(){
        if(this.targetRef){
            this.targetRef.innerHTML = '贝吉塔'
        }
      }
      render() {
        return <div ref={this.myRef} />;
      }
}

方式三：String 类型的 Refs (已过时，不推荐使用)

class StringRef extends Component {
  componentDidMount() {
    console.log('this.refs', this.refs);
  }
  render() {
    return (
      <div ref="container">
        StringRef
      </div>
    )
  }
}

方式四: useRef (React Hooks)

import { useRef } from 'react';
function RefExample(props){
    const inputElement = useRef()
    return(<div>
        <input ref={inputElement}></input>
        <button onClick={()=>{
            inputElement.current.focus()
        }}>focus</button>
    </div>)
}