React Hook入门系列（3）-- useRef

简介

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

优势

• 简化组件逻辑

• 复用状态逻辑

• 无需使用类组件编写

so，我们来学习第二个“Hook” - useRef

语法

// 定义
let r = useRef(null)    // 参数是对象初始值

// 设置
<div ref={r}></div>

// 使用
console.log(r)    // { current: xxx }

示例

import React, { useState, useEffect, useRef, Fragment } from 'react'

function Ref() {
    let [text, setText] = useState('是否每一场美梦醒来都很爽')
    let r = useRef(null)
    
    return (
        <Fragment>
            <input 
                type='text'
                value={text}
                onChange={(e) => {
                    setText(e.target.value)
                }}
                ref={r}
            />
            <button onClick={() => {
                r.current.focus()
            }}>设置焦点</button>
        </Fragment>
    )
}

示例2

通过useRef记录上次值

import React, { useState, useEffect, useRef } from 'react'

function Ref() {
    const [num, setNum] = useState(0)
    let prev = useRef(num)
    useEffect(() => {
        prev.current = num
    })
    return (
        <div>
            <p>当前值：{ num }</p>
            <p>上次值：{ prev }</p>
            <button onClick={() => {
                setNum(num + 1)
            }}>递增</button>
        </div>
    )
}

代码执行顺序为：状态改变 -> dom更新 -> useEffect

结尾

最后，祝大家2022一切皆顺~~~