react hooks--useRef用法

今天来讲一下useRef，我们可以通过它来获取组件实例对象或者DOM对象。除此外，我们还可以用它来进行定义变量，存放值等操作。下面我们来讲useRef最常用的操作，即访问DOM节点。

一、基础用法

const refContainer = useRef(initialValue);

useRef 返回一个可变的 ref 对象，对象里只有一个current属性，返回的 ref 对象在组件的整个生命周期内保持不变。

二、具体案例

案例主要是通过useRef来获取红色区块的DOM节点，拿到它的宽高并做显示。

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

type sizeParams = {
  width: number;
  height: number;
};

const UseRefExample: React.FC = () => {
  const [box, setBox] = useState({
    width: 500,
    height: 400,
  });
  const [redBox, setRedBox] = useState({
    width: 0,
    height: 0,
  });

  const boxRef = useRef({});

  useEffect(() => {
    fetchSize();
  }, []);

  const fetchSize = () => {
    setRedBox({ width: boxRef.current.offsetWidth, height: boxRef.current.offsetHeight });
  };

  return (
    

      

        
红色区块
        
当前宽为：{redBox.width}px
        
当前高为：{redBox.height}px
        点击获取红色区块当前宽高
      

       {
          setBox({ width: box.width + 20, height: box.height + 20 });
        }}
      >
        点击更改灰色区块宽高
      
    
  );
};

export default UseRefExample;

三、效果展示

由上述代码可知，我们红色区块的宽高是随着灰色区块的宽高改变而改变的。由下图我们可以看到，每次我们更改灰色区域的宽高后，只要点击红色区块的按钮就能获取当前红色区块改变后的宽高。

感谢您读完本文！如果本文对您有帮助，请点个赞呗，您的点赞是对我最大的支持和认可！

我的公众号：大前端教程，欢迎关注，会定期更新前端知识，希望能帮到您。