react hooks系列之useRef

火星田园犬 2020/4/20 5:17:25

react hooks系列之useRef

react hooks是 react 16.8 引入的特性,这里我们通过对react-hook-form进行分析来了解成熟的库是如何使用hook的。这将是一个系列,首先推荐 useRef

useRef

简介

在react中,我们使用Ref来获取组件的实例或者DOM元素。我们可以使用两种方式来创建 Ref

import * as React from 'react'
import { useState, useEffect, useRef, createRef } from 'react'

export default () => {
    const ref1 = createRef<HTMLFormElement>()
    const ref2 = useRef<HTMLInputElement>()

    useEffect(() => {
        console.log(ref1)
        console.log(ref2)
    }, [])

    return (
        <form ref={ref1}>
            <label>用户信息</label>
            <input type="text" ref={ref2} />
        </form>
    )
}

上面两种方式都能在组件 mounted 之后获取相关的DOM元素。在一个组件的正常的生命周期中可以大致可以分为3个阶段

  1. 从创建组件到挂载到DOM阶段。初始化props以及state, 根据state与props来构建DOM
  2. 组件依赖的props以及state状态发生变更,触发更新
  3. 销毁阶段

在第1阶段,使用createRefuseRef两者是没有区别。但是在第2阶段, 也就是更新阶段两者是有区别的。我们知道,在一个局部函数中,函数每一次执行,都会在把函数的变量重新生成一次。

export default () => {
    const ref1 = createRef<HTMLFormElement>()
    const ref2 = useRef<HTMLInputElement>()

    const [ count, setCount ] = useState<number>(0)

    useEffect(() => {
        if (!store.ref1) {
            store.ref1 = ref1
        } else {
            console.log(store.ref1 === ref1)
        }
    })
    
    useEffect(() => {
        setTimeout(() => {
            setCount(1)
        }, 1000)
    }, [])

    return (
        <form ref={ref1}>
            <label>用户信息</label>
            <input type="text" ref={ref2} />
        </form>
    )
}

image.png
我们使用一个外部的变量store来存储初次所创建的ref,在我们对组件进行更新后,会发现更新后的ref与我们初次创建的ref其实并不一致。这样也就意味着我们每更新一次组件, 就重新创建一次ref

由于有上面的问题,这在函数组件中,使用createRef去获取ref是不合理的。所以hook给我们提供一个新的API, 就是useRef。在useRef创建的ref仿佛就像外部定义的一个全局变量,不会随着组件的更新而重新创建。但组件销毁,它也会消失,不用手动进行销毁。

export default () => {
    const ref1 = createRef<HTMLFormElement>()
    const ref2 = useRef<HTMLInputElement>()

    const [ count, setCount ] = useState<number>(0)

    useEffect(() => {
        if (!store.ref1) {
            store.ref1 = ref1
        } else {
            console.log('ref1:', store.ref1 === ref1)
        }

        if (!store.ref2) {
            store.ref2 = ref2
        } else {
            console.log('ref2:', store.ref2 === ref2)
        }
    })

    useEffect(() => {
        setTimeout(() => {
            setCount(1)
        }, 1000)
    }, [])

    return (
        <form ref={ref1}>
            <label>用户信息</label>
            <input type="text" ref={ref2} />
        </form>
    )
}

image.png

通过上面的说明,我们知道useRef创建的ref并不会随着组件的更新而重新构建。由于这个特性,在使用react-hook的时候,可以使用useRef来存储常量。

useRef在react-hook-form中应用

现在回到我们的主题,看看react-hook-form是如何处理ref。在react-hook-form有一个API为register。
源码实现如下

...
function register(refOrValidationOptions, validationOptions) {
        if (isWindowUndefined) {
            return;
        }
        if (isString(refOrValidationOptions)) {
            registerFieldsRef({ name: refOrValidationOptions }, validationOptions);
            return;
        }
        if (isObject(refOrValidationOptions) && 'name' in refOrValidationOptions) {
            registerFieldsRef(refOrValidationOptions, validationOptions);
            return;
        }
        return (ref) => ref && registerFieldsRef(ref, refOrValidationOptions);
    }

使用闭包存储了对当前输入框的validationOptions, 返回的函数被ref的接收。这里使用了ref另外一种获取方式‘回调refs’

import { useForm } from 'react-hook-form'


export default () => {
    const { register, errors, handleSubmit } = useForm()

    const submit = useCallback((data, e) => {
        console.log(data, e)
    }, [])

    useEffect(() => {
        console.log(errors)
    })
    
    return (
        <form onSubmit={handleSubmit(submit)}>
            <label>用户信息</label>
            <input name="userName" ref={register({ required: true })} />
            {errors.userName && "Your input is required"}

            <button type={'submit'}>提交</button>
        </form>
    )
}

这里为什么使用回调refs,而不是refs。其实理由很简单,因为后面要引用的DOM元素或者React实例是未知,我们是不知道使用者会把register注册到INPUTTEXTAREA、还是其他的第三方组件。注册一个还是多个。使用回调refs我们能够直接获取到对应的真实DOM元素或者React实例,而使用了refs就会失去这种灵活性。

如果我们继续往后面进行分析,会看到useForm这个hook中,使用了大量的useRef来存储变量,原因看前面。
image.png
而前面通过register中调用的ref对象被注册到filedsRef中。

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[react hooks系列之useRef]http://www.zyiz.net/tech/detail-128541.html

上一篇:vue-数据监听与依赖收集

下一篇:工欲善其事必先利其器之chrome常用快捷键

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程