有没有其他简单的方法可以使用 React Hooks 获取容器的高度和宽度？

Question

我正在使用 React 钩子useEffect来获取container的宽度和高度。 我要解决的问题是：

1. 我想获得响应式容器的高度/宽度，而不是窗口的高度/宽度。
2. 我的初始状态设置为window.innerHeight并且这本身会使我在初始渲染上的输出崩溃，因为我首先使用dimension状态来完成某些事情。
3. 我想使用更简单的最新方法..可能是 useRef() 或任何东西..

我是这个 React Hooks 的新手，对很多事情一无所知。我想要完美地完成工作的简单代码。

我的代码如下：

function debounce(fn, ms) {
    let timer;
    return (_) => {
        clearTimeout(timer);
        timer = setTimeout((_) => {
            timer = null;
            fn.apply(this, arguments);
        }, ms);
    };
}

export default function App() {
    const [dimensions, setDimensions] = useState({
        height: window.innerHeight,
        width: window.innerWidth,
    });

    useEffect(() => {
        const debouncedHandleResize = debounce(function handleResize() {
            setDimensions({
                height: window.innerHeight,
                width: window.innerWidth,
            });
        }, 1000);

        document
            .getElementById('SldBox')
            .addEventListener('resize', debouncedHandleResize);

        return (_) => {
            document
                .getElementById('SldBox')
                .removeEventListener('resize', debouncedHandleResize);
        };
    });

    return (
        <div className='container' id='SldBox'>
            My Container
        </div>
    );
}

Answer 1

很酷的问题，这里有很多钩子要学习。

这是我们如何使用的示例：

• 使用状态
• 使用效果
• 使用备忘录
• 使用参考

https://codesandbox.io/s/keen-poincare-c8mcz?file=/src/App.js

useState ：你很好地利用了这个。 无需多做解释。

useRef ：创建一个 ref 然后将其传递给您的元素。

export default function App() {
  const ref = useRef(null);

  return (
    <div ref={ref}>stuff</div>
  );
}

现在在第一次渲染之后，我们可以很容易地引用元素。

useMemo ：要为元素设置观察者，我们可以使用ResizeObserver 。 如果我们不将其包装在useMemo中，我们将在每次渲染时重新创建此函数，这是一种浪费。 useMemo解决了这个问题。 我们还为ref.current useMemo第二个参数。 这样，任何时候 ref 更改（例如在第一次渲染时），都会重新计算elementObserver函数。

  const elementObserver = useMemo(() => {
    return new ResizeObserver(() => {
      debounce(() => {
        if (!ref.current) return;
        setDimensions({
          height: ref.current.clientHeight,
          width: ref.current.clientWidth
        });
      }, 1000)();
    });
  }, [ref.current]);

useEffect ：现在我们可以在组件挂载时使用useEffect设置观察者。 我们再次包含一个依赖数组，它告诉效果在任何这些值发生更改时触发提供的回调函数。 它也会在组件挂载时始终运行，因此我们需要检查 ref 是否存在。 此外，将元素分配给“清理”功能效果中的变量。

  useEffect(() => {
    if (!ref) return;
    const element = ref.current;

    elementObserver.observe(element);
    return () => {
      elementObserver.unobserve(element);
    };
  }, [ref.current, elementObserver]);