createRef | useRef

大白话：createRef 和 useRef 一个没有缓存 一个有缓存 所以现在都基本都使用useRef

createRef:

页面默认打印为null 在useEffect打印可以获取dom 指针会变 没有缓存, 当点击事件触发 重新执行整个组件 页面打印的每一次都为空

function Home() {
    const [count, setCount] = useState(0)//设置一个变量
    const createref = createRef()//createref方式创建实例
    
    const onClick1 = () => {
        createref.current = count//第一次为 0  第二次也为0
        setCount(count + 1)//第一次为1  第二次为2
    }//点击 20行又为空 所以 createRef 会每次改变指针
    
    useEffect(() => {
        // console.log(xxx.current);//使用
        // xxx.abc=1 //肯定报错
        // console.log(createref.current,'可以获取dom');//可以获取dom
        createref.current = count//赋值方式
        console.log(createref.current, 'one');//只执行一次 null
    }, [])//等dom渲染完后 
    
   console.log(count);
   console.log(createref.current, 'createref');//默认null   每一次都为空  
   
   return (
        <div>
             <div ref={createref} onClick={onClick1}>createref</div>
             <h1>createref:{createref.current}</h1>
        </div`>`
   )
}

export default Home

useRef:

页面默认打印为undefined 在useEffect打印也可以获取dom 指针不会变 有缓存 , 当点击事件触发 重新执行整个组件 页面打印的每一次都是缓存上一次所赋的值

function Home() {
    const [count, setCount] = useState(0)//设置一个变量    
    const useref = useRef()//所有的特性都是基于 它指针永远不变的原理
    
    const onClick2 = () => {
        useref.current = count//第一次为 0  第二次 为 1
        setCount(count + 1)//第一次为 1  第二次 为 2
    }//点击又为空 所以 createRef 会每次改变指针
    useEffect(() => {
        console.log(useref.current, '可以获取dom');//可以获取dom
        useref.current = count//赋值方式
        console.log(useref.current, 'one');
    }, [])//等dom渲染完后 

    // console.log(count);
    console.log(createref.current, 'createref');//默认null   每一次都为空  
    console.log(useref.current, 'useref');//默认undefined 每一次缓存上一次所赋的值 39行
   
   return (
        <div>
             <div ref={createref} onClick={onClick1}>createref</div>
             <h1>createref:{createref.current}</h1>
        </div`>`
   )
}

export default Home