2.2 用ref引用一个值做记忆功能

一、ref引用值

1. 可以对普通变量做记忆功能

   import { useState } from 'react'
   
   function App() {
     const [count, setCount] = useState(0)
     let num = 0
   
     const handleClick = () => {
       setCount(count + 1)
       num++
       console.log(num)
     }
   
     return (
       <>
         <div>Default Template</div>
         <button onClick={handleClick}>计数</button>
         <br />
         {count}
       </>
     )
   }
   
   export default App
   

   注意：上述代码在触发按键后，控制台输出的一只是1

2. 解决上面的num没有记忆功能的方案：引用useRef

   import { useState, useRef } from 'react'
   
   function App() {
     const [count, setCount] = useState(0)
     const num = useRef(0)
   
     const handleClick = () => {
       setCount(count + 1)
       num.current++
       console.log(num.current)
     }
   
     return (
       <>
         <div>Default Template</div>
         <button onClick={handleClick}>计数</button>
         <br />
         {count}
       </>
     )
   }
   
   export default App
   

   通过useRef，可以看到控制台的数除以已经实现累加

3. ref与state的区别

   ref	state
   useRef(initialValue)返回{current:initialValue}	useState(initialValue)返回state变量的当前值和一个state设置函数([value, setValue])
   更改时不会触发重新渲染	更改时出发重新渲染
   可变--可以在渲染过程之外修改和更新current的值	不可变--必须使用state设置的函数来修改state变量，从而排队重新渲染
   不应在渲染期间读取(或写入)current值	可以随时读取state，但是每次渲染都有自己不变的state快照

4. 使用场景与解决的问题：

   1. 在JS中做限定操作时候

   2. 不参与页面渲染(不可以参与页面渲染)