React中的refs，应用场景

目录

 1、 创建ref的形式有三种：

 2、应用场景

---

React 中的 Refs提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素

本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点

 1、 创建ref的形式有三种：

 创建ref的形式有三种：

1、传入字符串，使用时通过this.refs传入的字符串的格式获取对应的元素

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref="myref" />;
  }
}


访问当前节点的方式如下:
this.refs.myref.innerHTML = "hello";

2、 传入对象，对象是通过 React.createRef() 方式创建出来，使用时获取到创建的对象中存在 current 属性就是对应的元素

refs通过React.createRef()创建，然后将ref属性添加到React元素中，如下：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}


当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中访问

const node = this.myRef.current;

3、 传入函数，当ref传入为一个函数的时候，在渲染过程中，回调函数参数会传入一个元素对象，然后通过实例将对象进行保存

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={element => this.myref = element} />;
  }
}


获取ref对象只需要通过先前存储的对象即可

const node = this.myref 

上述三种情况都是ref属性用于原生HTML元素上，如果ref设置的组件为一个类组件的时候，ref对象接收到的是组件的挂载实例

注意的是，不能在函数组件上使用ref属性，因为他们并没有实例

 2、应用场景

 1. 通过使用ref更新组件

  2. 通过使用props，state方式重新渲染子元素

但下面的场景使用refs非常有用：

           对Dom元素的焦点控制、内容选择、控制

        对Dom元素的内容设置及媒体播放

        对Dom元素的操作和对组件实例的操作

        集成第三方 DOM