React Ref 其实是这样的

大家好，我是Mokou，好久没有冒泡了，最近一直在看研究算法和数据结构方面的东西，但是似乎很多前端不喜欢看这种东西，而且目前本人算法方面也很挫，就不献丑了。

当然了，最近也开始研究React了，这篇文章主要是讲述 Ref 相关的内容，如有错误请指正。

ref 的由来

在典型的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改一个子组件，你需要使用新的 props 来重新渲染它。但是，在某些情况下，你需要在典型数据流之外强制修改子组件/元素。

适合使用 refs 的情况：

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

ref 的三种方式

在 React v16.3 之前，ref 通过字符串（string ref）或者回调函数（callback ref）的形式进行获取。

ref 通过字符获取：

// string ref
class MyComponent extends React.Component {
   
  componentDidMount() {
   
    this.refs.myRef.focus();
  }

  render() {
   
    return <input ref="myRef" />;
  }
}

ref 通过回调函数获取：

// callback ref
class MyComponent extends React.Component {
   
  componentDidMount() {
   
    this.myRef.focus();
  }

  render() {
   
    return <input ref={
   (ele) => {
   
      this.myRef = ele;
    }} />;
  }
}

在 v16.3 中，经 0017-new-create-ref 提案引入了新的 API：React.createRef。

ref 通过 React.createRef 获取：

// React.createRef
class