React基础—refs

1. refs

React核心就在于虚拟DOM，也就是在React中不总是直接操作页面真实的DOM元素，并且结合Diffing算法，可以做到最小化页面重绘。最为直观的为：

在使用数组的map方法返回一个子元素的时候，通常需要指定一个key值，而这个key值就是用于diffing算法的对比关键，这里不详细介绍，将在下小节进行简单介绍。

但有些时候不可避免的我们需要一种方法可以操作我们定义的元素标签，并作出对应的修改。在React中提供了一种访问DOM节点的方式，也就是这里的refs。

在[官网](Refs and the DOM – React (docschina.org))中也给出了下面几种应用场景：

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

下面来一个简单的案例来体验一下所说的场景。

class RefsExample extends Component {

    handleSubmit = (event) => {
       // 获取数据进行判断逻辑
        let username = this.usernameRef.current.value
        let password = this.passwordRef.current.value
        if(!(username === '123' && password === '1')) {
            event.preventDefault()
            alert("信息不正确！")
        }
    }

    constructor() {
        super();
        this.usernameRef = React.createRef()
        this.passwordRef = React.createRef()
    }

    render() {
        return (
            <form action='' onSubmit={this.handleSubmit}>
                用户名：<input ref={this.usernameRef} type='text'/><br/>
                密 码：<input ref={this.passwordRef} type='password'/><br/>
                <button>提交</button>
            </form>
        );
    }
}

注意到，上面的代码中我们使用了React.createRef()来创建一个ref引用，继而可以直接使用这个引用来获取到用户输入的值。

事实上，在React中提供了不止一种创建ref引用的方式，一共可以分为三种，下面分别介绍。

2. refs的分类

2.1 字符串形式的ref

在官网文档中也标记了过时的API。它已过时并可能会在未来的版本被移除。在render方法中使用字符串定义一个ref：

other：<p ref='wenben'>文本</p>

然后在js调用处处理：

console.log(this.refs.wenben)

值得注意的是，在webstrom工具中已经标记了删除线：

2.2 回调函数方式的ref

标准叫法为称为“回调 refs”。它能助你更精细地控制何时 refs 被设置和解除。其实也就是在标签中使用ref来传入一个回调函数，比如下面的案例：

class RefsExample extends Component {

    handleSubmit = (event) => {
        // 获取数据进行判断逻辑
        let username = this.usernameRef.current.value
        let passwd = this.userPassword.value
        if (!(username === 'root' && passwd === '123')) {
            event.preventDefault()
            alert("信息不正确！")
        }
    }


    constructor() {
        super();
        this.usernameRef = React.createRef()
    }

    // 获取焦点
    focusTextInput = (element) => {
        this.userPassword = element  // 将当前元素的对象保存起来
    }

    render() {
        return (
            <form action='' onSubmit={this.handleSubmit}>
                用户名：<input ref={this.usernameRef} type='text'/><br/>
                密 码：<input ref={this.focusTextInput} type='password'/><br/>
                <button>提交</button>
            </form>
        );
    }
}

2.3 createRef

也即是这篇文章的开篇第一个案例，就不再重复介绍：

this.passwordRef = React.createRef()

3. 关于refs的说明

• 默认情况下，你不能在函数组件上使用ref属性，因为它们没有实例；
• 如果要在函数组件中使用ref，你可以使用forwardRef，或者可以将该组件转化为 class 组件；
• ref会在componentDidMount或componentDidUpdate生命周期钩子触发前更新；
• 勿过度使用 Refs；

这篇好文章是转载于：学新通技术网