userRef返回一個(gè)ref對(duì)象， 返回的ref對(duì)象在組件的整個(gè)生命周期保持不變；
最常用的ref是兩種用法：

1. 引入DOM（或者組件，但是需要是class組件）元素；
2. 保存一個(gè)數(shù)據(jù)，這個(gè)對(duì)象在整個(gè)生命周期中可以保持不變；

// 1. 引入DOM，若引用組件，必須為class組件；
// 2. 若為function組件，需要用React.forwardRef()；
import React, { useRef } from 'react'
class TestCpn extends React.Component {
  render() {
    return <h2>TestCpn</h2>
  }
}
function TestCpn2(props) {
  return <h2>TestCpn2</h2>
}
export default function RefHookDemo01() {
  const titleRef = useRef();
  const inputRef = useRef();
  const testRef = useRef();
  const testRef2 = useRef();
  function changeDOM() {
    titleRef.current.innerHTML = "Hello world";
    inputRef.current.focus();
    console.log(testRef.current);
    console.log(testRef2.current);
  }
  return (
    <div>
      <h2 ref={titleRef}>RefHookDemo01</h2>
      <input ref={inputRef} type="text" />
      <TestCpn ref={testRef} />
      <TestCpn2 ref={testRef2} />
      <button onClick={e => changeDOM()}>修改DOM</button>
    </div>
  )
}

current中保存的是元素或組件對(duì)象，也可以是其他東西；

1. 可以給useRef傳入數(shù)據(jù)，這個(gè)數(shù)據(jù)已經(jīng)放在current中了；

2. useRef返回一個(gè)ref對(duì)象，返回的ref對(duì)象在組件的整個(gè)生命周期中保持不變；

   
   
   image.png

這里我們使用useEffect來(lái)改變r(jià)ef對(duì)象。

• count一旦發(fā)生變化，重新渲染后 => 執(zhí)行useEffect代碼。

import React, { useRef, useState, useEffect } from 'react'
export default function RefHookDemo02() {
  const [count, setCount] = useState(0);
  const numRef = useRef(count);
  useEffect(() => {
    numRef.current = count;
  }, [count])
  return (
    <div>
      {/* <h2>numRef中的值：{numRef.current}</h2>
      <h2>count中的值：{count}</h2> */}
      <h2>count上一次的值：{numRef.current}</h2>
      <h2>count這一次的值：{count}</h2>
      <button onClick={e => setCount(count + 10)}>+10</button>
    </div>
  )
}