useRef()

useRef()可以用来绑定元素节点和保存变量

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

export default function UseRef() {
    const index = useRef(0)
    const myRef = useRef()
    const [val, setVal] = useState(0)
    // const te = myRef.current.value
    return (
        <div>
            {/* 点击按钮后，控制台输出增加，但页面上的显示并未变化 */}
            {/* 在使用useState后,点击按钮调用setValue触发页面渲染，index的值也更新了 */}
            {/* 说明useRef可以存储变量，不会因为页面的渲染而重新赋值为0 */}
            {/* 将ref绑在元素节点上可以获得到对应的DOM元素 */}
            index:{index.current}<br />value:{val}<br />
            <input id='ipt' ref={myRef} type={'text'} />
            <button onClick={() => {
                index.current++
                setVal(myRef.current.value)
                console.log(index.current)
                console.log('输入框的值：', myRef.current.value)
                myRef.current.value = ''

            }}>jia</button>
            {/* {myRef.current.value} */}
            {/* {te} */}

        </div>
    )
}