ref 的使用

• 在React的开发模式中，通常情况下不需要、也不建议直接操作DOM原生，但是某些特殊的情况，确实需要获取到DOM进行某些操作：

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

• ref 不会被当做属性传递给子组件,而是交由 React 内部处理

创建 ref的方式

• 如何创建refs来获取对应的DOM呢？目前有三种方式：

传入字符串(过期)

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

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <h2 ref="titleRef">Hello React</h2>
        <button onClick={e => this.changeText()}>改变文本</button>
      </div>
    )
  }

  changeText() {
    this.refs.titleRef.innerHTML = "Hello Coderwhy";
  }
}

传入一个对象(推荐)

• 对象是通过 React.createRef() 方式创建出来的；

• 在构造函数中声明并赋值一个 ref this.titleRef = createRef();
• 将创建的ref 对象赋值给元素的 ref 属性; <h2 ref={this.titleRef}>Hello React</h2>

• 使用时获取到创建的对象其中有一个current属性就是对应的元素；
  this.titleRef.current.innerHTML = "Hello JavaScript";

import React, { PureComponent, createRef, Component } from 'react';
export default class App extends PureComponent {
  constructor(props) {
    super(props);
    this.titleRef = createRef();
  }

  render() {
    return (
      <div>
        <h2 ref={this.titleRef}>Hello React</h2>
        <button onClick={e => this.changeText()}>改变文本</button>
      </div>
    )
  }

  changeText() {
    this.titleRef.current.innerHTML = "Hello JavaScript";
  }
}

传入一个函数

• 该函数会在DOM被挂载时进行回调，这个函数会传入一个 元素对象，我们可以自己保存；
• 使用时，直接拿到之前保存的元素对象即可；

import React, { PureComponent, createRef, Component } from 'react';
export default class App extends PureComponent {
  constructor(props) {
    super(props);
    this.titleEl = null;
  }

  render() {
    return (
      <div>
        <h2 ref={arg => this.titleEl = arg}>Hello React</h2>
        <button onClick={e => this.changeText()}>改变文本</button>
      </div>
    )
  }

  changeText() {
    this.titleEl.innerHTML = "Hello TypeScript";
  }
}

ref 的类型

• 当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性；
• 当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性；
• 函数式组件由于没有实例,所以无法通过 ref 获取他们的实例,但可以通过 React.forwardRef 拿到

import React, { PureComponent, forwardRef } from 'react';

// 高阶组件forwardRef
const Profile = forwardRef(function(props, ref) {
  return <p ref={ref}>Profile</p>
})

export default class App extends PureComponent {
  constructor(props) {
    super(props);
    this.profileRef = createRef();
  }

  render() {
    return (
      <div>
        <Profile ref={this.profileRef} name={"why"}/>
        <button onClick={e => this.printRef()}>打印ref</button>
      </div>
    )
  }

  printRef() {
    console.log(this.profileRef.current);
  }
}

应用

• 通过 ref 我们可以获取到当前元素,那么就可以在父组件中给子组件设置 ref,然后通过 ref 拿到子组件调用子组件的方法

import React, { PureComponent, createRef, Component } from 'react';

class Counter extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    }
  }

  render() {
    return (
      <div>
        <h2>当前计数: {this.state.counter}</h2>
        <button onClick={e => this.increment()}>+1</button>
      </div>
    )
  }

  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
}

export default class App extends PureComponent {
  constructor(props) {
    super(props);
    this.counterRef = createRef();
  }

  render() {
    return (
      <div>
        <Counter ref={this.counterRef}/>
        <button onClick={e => this.appBtnClick()}>App按钮</button>
      </div>
    )
  }
  appBtnClick() {
    this.counterRef.current.increment();
  }
}