useRef

在函数组件中，可以基于useRef获取DOM元素！类似于类组件中的： - ref={x=>thix.box=x} - React.createRef 注意：React.createRef在函数组件中依然可以使用！ - createRef 每次渲染都会返回一个新的引用 - 而 useRef 每次都会返回相同的引用

JavaScript

import React, { useState, useEffect, useRef, createRef } from "react";
let prev;
export default function Demo() {
    const [num, setNum] = useState(0);
    const btnBox = useRef(null); //换成createRef也是可以的
    if (!prev) {
        prev = btnBox;
    } else {
        console.log(prev === btnBox);
    }
    useEffect(() => {
        console.log(btnBox.current);
    }, []);
    return <div>
        <span>{num}</span>
        <button ref={btnBox} onClick={() => setNum(num + 1)}>按钮</button>
    </div>;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

useRef #

useRef