首先我们要清楚的是：

1. useRef返回的对象在整个生命周期中保持不变。
2. useRef 只会在组件渲染的时候更新一次。
3. 更新useRef().current的值，不会引起组件的重新渲染。
4. 只有当useSate更新时，才会引起组件的重新渲染，useEffect才能监测到变化。
5. 更新useRef的是副作用，一般写在useEffect或者事件处理方法里。

如果我们像下面这样写，useEffect里的内容是无法打印出来的。因为useRef().current并不会引起组件的重新渲染，从而useEffect也监测不到变化。

function DemoTest() {
  const refObj = useRef(0)
  
  useEffect(() => {
    console.log('refObj.current=>', refObj.current)
  }, [refObj.current])

  return <div onClick={() => {
    refObj.current = 1;
    console.log('点我了');
  }} style={{ cursor: 'pointer' }}>DemoTest</div>
}

打印结果如下：

但是如果我们加了一个useSate，结果就会不同了。

function DemoTest() {
  const refObj = useRef(0)
  const [stateValue, setStateValue] = useState('A')

  useEffect(() => {
    console.log('refObj.current=>', refObj.current)
  }, [refObj.current])

  return <div onClick={() => {
    refObj.current = 1;
    console.log('点我了');
    setStateValue('b')
  }} style={{ cursor: 'pointer' }}>DemoTest</div>
}

看！useEffect内的内容已经打印出来了。那是因为onClick里面更新setStateValue(‘b’)的值，引起了组件渲染，从而触发useEffect监测到页面变化。

因此，useRef不能随便用，要用对。