userRef返回一个ref对象， 返回的ref对象在组件的整个生命周期保持不变；
最常用的ref是两种用法：

1. 引入DOM（或者组件，但是需要是class组件）元素；
2. 保存一个数据，这个对象在整个生命周期中可以保持不变；

// 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中保存的是元素或组件对象，也可以是其他东西；

1. 可以给useRef传入数据，这个数据已经放在current中了；

2. useRef返回一个ref对象，返回的ref对象在组件的整个生命周期中保持不变；

   
   
   image.png

这里我们使用useEffect来改变ref对象。

• count一旦发生变化，重新渲染后 => 执行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>
  )
}