Ref Hook

Ref Hook

Ref Hook用于对ref的缓存，通常用于对某个函数组件节点中某个局部引用进行缓存

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

window.arr = []

const App = () => {
  // 点击刷新按钮n次 你会发现window.arr中的存储的ref引用都是不同的
  // const inputRef = React.createRef()
  
  // 点击刷新按钮n次 你会发现window.arr中的存储的ref引用都是同一个 这就是useRef的缓存机制
  const inputRef = useRef()
  window.arr.push(inputRef)
  const [refresh, setRefresh] = useState({})
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={() => console.log(inputRef.current.value)}>得到input的值</button>
      <button onClick={() => setRefresh({})}>刷新</button>
    </div>
  )
}

export default App