React.createRef()

概述：

Refs提供一个活的DOM节点或者创建在render方法中的React元素方法中。

为什么使用Ref？更改子元素，一般需要使用新的props去重新渲染子元素。但有时需要在数据流之外强制更改子元素。

被更改的子元素可能是有一个React组件的实例，或者是一个DOM元素，此时可以用Refs。

（一）什么时候使用Refs？

• 管理焦点、文本选择、媒体回放
• 触发必要动画
• 整合第三方DOM库

（二）不要过度使用Refs！

（三）创建Refs

class MyComponent extends from React.Compone {
  constructor (props) {
    super(props);
    this.myRef = React.creatRef();
  }
  render() {
    return 
;
  }
}

（四）访问Refs

当一个ref通过render放入一个元素中，一个对节点的引用可以通过ref的current属性得到；

const node = this.myRef.current;

ref值根据节点类型的不同而不同：

• 当ref属性用于HTML元素，在构造器中通过React.createRef()函数创建的ref接收底层DOM元素作为它的current属性；
• 当ref属性用于传统的类组件，ref对象接收挂载好的组件实例作为它的current；
• 不能将ref属性用于函数式组件上，因为他们没有实力（instance）！

React会在组件挂在是将DOM元素分配给current属性，并且在组件被卸载时，将current属性重置为null。

摘自原文章：https://www.cnblogs.com/crazycode2/p/10023493.html