React中如何确保容器加载完成并能正确获取scrollHeight与clientHeight？

嘿，我来帮你分析下这个问题～你用useMemo来判断容器是否就绪，但容器出现时却返回false，核心原因是useMemo的工作时机和依赖逻辑没适配DOM的更新节奏，咱们一步步拆解解决：

为什么原来的代码不生效？ #

首先，useMemo是在组件渲染阶段计算值的，这时候容器可能还没完全挂载到DOM上，或者它的尺寸还没来得及更新（比如容器里的内容是异步加载的）。另外，你把messagesContainer.current?.scrollHeight和clientHeight放进依赖数组里，但React对依赖的对比是浅比较——ref.current本身是个对象，它的属性变化并不会触发组件重新渲染，所以useMemo不会重新计算，自然就一直返回false了。

解决方案1：用useEffect + ResizeObserver（推荐，支持动态尺寸变化） #

如果你的容器尺寸可能会动态变化（比如加载新消息后高度改变），推荐用ResizeObserver来监听容器的尺寸变化，结合useEffect和useState来维护就绪状态：

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

function YourChatComponent() {
  const messagesContainer = useRef(null);
  const [containerReady, setContainerReady] = useState(false);

  useEffect(() => {
    const container = messagesContainer.current;
    if (!container) return;

    // 定义检查容器就绪的逻辑
    const checkContainerReady = () => {
      const scrollHeight = container.scrollHeight;
      const clientHeight = container.clientHeight;
      // 只要两个高度都存在，就标记为就绪
      setContainerReady(!!scrollHeight && !!clientHeight);
    };

    // 组件挂载后先执行一次检查
    checkContainerReady();

    // 监听容器的尺寸变化，随时更新状态
    const resizeObserver = new ResizeObserver(checkContainerReady);
    resizeObserver.observe(container);

    // 组件卸载时清理监听
    return () => {
      resizeObserver.unobserve(container);
    };
  }, []);

  console.log("Container ready:", containerReady);

  return (
    <div ref={messagesContainer} className="messages-container">
      {/* 你的消息内容 */}
    </div>
  );
}

解决方案2：仅初始加载时检查（简单场景） #

如果你的容器尺寸不会动态变化，只是需要在初始挂载时判断是否就绪，直接用useEffect就行——它会在组件挂载完成（DOM已经渲染）后执行：

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

function YourComponent() {
  const messagesContainer = useRef(null);
  const [containerReady, setContainerReady] = useState(false);

  useEffect(() => {
    const scrollHeight = messagesContainer.current?.scrollHeight;
    const clientHeight = messagesContainer.current?.clientHeight;
    setContainerReady(!!scrollHeight && !!clientHeight);
  }, []);

  console.log("Container ready:", containerReady);

  // ...组件其他代码
}

这两种方案都能确保你在容器真正就绪后拿到正确的状态，不会再出现容器已经显示但返回false的情况啦～

备注：内容来源于stack exchange，提问作者Vasya Krenta vkrenta