【React系列】受控非受控组件

本文来自#React系列教程：https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg5MDAzNzkwNA==&action=getalbum&album_id=1566025152667107329)

一. refs 的使用

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

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

1.1. 创建 ref 的方式

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

• 方式一：传入字符串
  • 使用时通过 this.refs.传入的字符串格式获取对应的元素；
• 方式二：传入一个对象
  • 对象是通过 React.createRef() 方式创建出来的；
  • 使用时获取到创建的对象其中有一个current属性就是对应的元素；
• 方式三：传入一个函数
  • 该函数会在DOM被挂载时进行回调，这个函数会传入一个 元素对象，我们可以自己保存；
  • 使用时，直接拿到之前保存的元素对象即可；

代码演练：

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

export default class App extends PureComponent {
   
  constructor(props) {
   
    super(props);

    this.titleRef = createRef();
    this.titleEl = null;
  }

  render() {
   
    return (
      <div>
        <h2 ref="title">String Ref</h2>
        <h2 ref={
   this.titleRef}>Hello Create Ref</h2>
        <h2 ref={
   element => this.titleEl = element}>Callback Ref</h2>

        <button onClick={
   e => this.changeText()}>改变文本</button>
      </div>
    )
  }

  changeText() {
   
    this.refs.title.innerHTML = "你好啊,李银河";
    this.titleRef.current.innerHTML = "你好啊,李银河";
    this.titleEl.innerHTML = "你好啊,李银河";
  }
}

1.2. ref 节点的类型

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

• 当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性；
• 当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性；
• 你不能在函数组件上使用 ref 属性，因为他们没有实例；

这里我们演示一下ref引用一个class组件对象：

import React, {
    PureComponent, createRef } 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.