import React, { useState, useEffect, useRef } from "react";
import { Button } from 'antd';
let prev1,
    prev2;
const Demo = function Demo() {
    let [num, setNum] = useState(0);
    let box1 = useRef(null),
        box2 = React.createRef();
    if (!prev1) {
        // 第一次DEMO執(zhí)行，把第一次創(chuàng)建的REF對(duì)象賦值給變量
        prev1 = box1;
        prev2 = box2;
    } else {
        // 第二次DEMO執(zhí)行，我們驗(yàn)證一下，新創(chuàng)建的REF對(duì)象，和之前第一次創(chuàng)建的REF對(duì)象，是否一致？
        console.log(prev1 === box1); //true  useRef再每一次組件更新的時(shí)候（函數(shù)重新執(zhí)行），再次執(zhí)行useRef方法的時(shí)候，不會(huì)創(chuàng)建新的REF對(duì)象了，獲取到的還是第一次創(chuàng)建的那個(gè)REF對(duì)象！！
        console.log(prev2 === box2); //false createRef在每一次組件更新的時(shí)候，都會(huì)創(chuàng)建一個(gè)全新的REF對(duì)象出來(lái)，比較浪費(fèi)性能！！
        // 總結(jié)：在類組件中，創(chuàng)建REF對(duì)象，我們基于 React.createRef 處理；但是在函數(shù)組件中，為了保證性能，我們應(yīng)該使用專屬的 useRef 處理！！
    }

    useEffect(() => {
        console.log(box1.current);
        console.log(box2.current);
    });

    return <div className="demo">
        <span className="num" ref={box1}>{num}</span>
        <span className="num" ref={box2}>哈哈哈</span>
        <Button type="primary" size="small"
            onClick={() => {
                setNum(num + 1);
            }}>
            新增
        </Button>
    </div>;
};