React 学习笔记 day 7

在React中，我们可以使用自定义钩子（useRef）来访问和修改DOM元素。这是一个非常有用的功能，可以用来创建自定义的Hooks，以便在React函数组件中管理和操作DOM元素。

以下是一个使用自定义钩子来访问和修改DOM元素的例子：

import React, { useRef, useEffect } from 'react';
 
function useComponentSize(myRef) {
  const [size, setSize] = React.useState({ width: 0, height: 0 });
 
  const handleResize = React.useCallback(() => {
    if (myRef.current) {
      setSize({ width: myRef.current.offsetWidth, height: myRef.current.offsetHeight });
    }
  }, [myRef]);
 
  React.useEffect(() => {
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [handleResize]);
 
  return size;
}
 
function MyComponent() {
  const myRef = useRef(null);
  const size = useComponentSize(myRef);
 
  return (
    <div ref={myRef} style={{ width: '50%', height: '50vh', background: 'lightblue' }}>
      Size: {JSON.stringify(size)}
    </div>
  );
}
 
export default MyComponent;

在这个例子中，我们创建了一个名为useComponentSize的自定义钩子，它使用useRef来获取组件的DOM引用，并监听窗口的resize事件来更新尺寸信息。我们的函数组件MyComponent使用了这个钩子，并将其返回的尺寸信息显示在组件内部。