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<sizeParams>({
    width: 500,
    height: 400,
  });
  const [redBox, setRedBox] = useState<sizeParams>({
    width: 0,
    height: 0,
  });

  const boxRef = useRef<any>({});

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

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

  return (
    <div
      style={{
        width: `${box.width}px`,
        height: `${box.height}px`,
        background: '#ccc',
        margin: '20px',
        padding: '20px',
        fontSize: '18px',
      }}
    >
      <div
        style={{
          width: '70%',
          height: '70%',
          background: 'red',
          marginBottom: '20px',
          padding: '10px',
        }}
        ref={boxRef}
      >
        <p>红色区块</p>
        <p>当前宽为：{redBox.width}px</p>
        <p>当前高为：{redBox.height}px</p>
        <button onClick={fetchSize}>点击获取红色区块当前宽高</button>
      </div>

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

export default UseRefExample;

三、效果展示

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

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

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