useRef原理

import React from "react";
import * as ReactDOMClient from "react-dom/client";
const AppDOM = React.createRef()
let root
let refIndex = 0

const render = () => {
  if(!root){
    root = ReactDOMClient.createRoot(AppDOM.current);
  }
  refIndex = 0
  root.render(<Children />);
}

const refs = []
const useRef = (initVal) => {
   if(!refs[refIndex]){
     refs[refIndex] = {current: initVal}
   }
   refIndex++
   return refs[refIndex - 1]
}

const Children = () => {
  const count1 = useRef(0)
  const count2 = useRef(0)
  const showCounts = () => {
    setTimeout(() => {
      alert(`count1:${count1.current}  count2:${count2.current}`)
    },5000)
  }
  return (
      <div>
        <div>
          count1值为：{count1.current}
          <button onClick={() => count1.current = ++count1.current}>
            改变count1
          </button>
        </div>
        <div>
          count2值为：{count2.current}
          <button onClick={() => count2.current = count2.current + 1}>
            改变count2
          </button>
        </div>
        <button onClick={() => render()}>
          重新render
        </button>
        <button onClick={showCounts}>
          5秒后输出count1、count2
        </button>
      </div>
  )
}

const App = () => {
  return (
      <div ref={AppDOM}>
        <Children/>
      </div>
  )
}

export default App

与useState区别

• useRef()是返回一个对象{current: state},所以不管什么时候取useRef赋值的变量，都是最新的值。因为每次返回都是同一个对象的引用，每次修改count = count.current + 1都是改的这个对象的属性。
• 而useState每次调用返回的都是一个新的引用，所以就会造成下面这个问题：

import {useState} from "react";

const App = () => {
  const [count, setCount] = useState(0)

  const handleShowClick = () => {
    setTimeout(() => {
      alert(`count值为${count}`)
    },5000)
  }
  return (
      <div>
        <button onClick={() => setCount(count + 1)}>count加1</button>
        <button onClick={handleShowClick}>展示count</button>
      </div>
  )
}

export default App

  点击【展示count】按钮后，5秒内多次点击【count加1】，最终展示效果为"count值为0"。
  这是因为每次render都会有一个作用域，点击【展示count】后，调用handleShowClick，此时这个方法体内拿到的count是0，可以理解为函数组件每次渲染都会形成一个闭包，闭包内有自己的作用域。所以5秒内不管改变多少次count值，最终展示效果都是"count为0"。

如何解决useState引起的闭包问题。

用useRef替换useState

import {useRef} from "react";

const App = () => {
  const count = useRef(0)

  const handleShowClick = () => {
    setTimeout(() => {
      alert(`count值为${count.current}`)
    },5000)
  }
  return (
      <div>
        <button onClick={() => count.current = count.current + 1}>count加1</button>
        <button onClick={handleShowClick}>展示count</button>
      </div>
  )
}

export default App

使用场景

1. 存dom
2. 存值（任何时候都可以拿到最新值）