React进阶——useRef()

Ref

React提供了一个属性ref，用于表示对组价实例的引用，其实就是ReactDOM.render()返回的组件实例：

• ReactDOM.render()渲染组件时返回的是组件实例；
• 渲染dom元素时，返回是具体的dom节点。

ref可以挂载到组件上也可以是dom元素上；

• 挂到组件(class声明的组件)上的ref表示对组件实例的引用。不能在函数式组件上使用 ref 属性，因为它们没有实例：
• 挂载到dom元素上时表示具体的dom元素节点。

useRef()

useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。
首先来看一下它传统的用法：

import React, {
    useState, useEffect, useMemo, useRef } from 'react';

export default function App(props){
   
  const [count, setCount] = useState(0);

  const doubleCount = useMemo(() => {
   
    return 2 * count;
  }, [count])