如何在React组件渲染前获取其尺寸（高/宽）？组件尺寸定义疑问

首先得明确一点：React本身并不管组件的尺寸和布局——这些依然是由CSS（不管是外部样式表、内联样式还是CSS Modules）和浏览器的渲染引擎决定的，和你用jQuery的时代本质完全一样。区别只是React的组件生命周期、虚拟DOM机制，让“提前获取尺寸”这件事有了一些约束。

你之前用$('#container').width()能直接拿到尺寸，是因为那个时候容器已经实实在在挂载到页面上了，jQuery直接操作的是真实DOM。但React组件在“构建”阶段（比如函数组件执行、类组件的render方法运行），只是生成虚拟DOM，还没把真实DOM渲染到页面上，自然没有节点可以查询尺寸。

下面给你几个实用的解决方案，对应不同的场景：

1. 最常规：组件挂载后获取尺寸（90%的场景都适用） #

等组件挂载到DOM上之后，就能通过原生JS获取真实节点的尺寸，完全不需要jQuery。用getBoundingClientRect()是最推荐的方式，能拿到精准的布局信息。

函数组件示例： #

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

function MyComponent() {
  // 用ref绑定真实DOM节点
  const containerRef = useRef(null);
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    // 组件挂载后，ref.current才会指向真实DOM
    if (containerRef.current) {
      const { width, height } = containerRef.current.getBoundingClientRect();
      setSize({ width, height });
      // 这里就可以用尺寸做后续逻辑，比如渲染依赖尺寸的子组件
    }
  }, []); // 空依赖数组，确保只在挂载后执行一次

  return (
    <div ref={containerRef} className="your-container-class">
      {/* 依赖尺寸的内容可以等尺寸获取到再渲染 */}
      {size.width > 0 && <p>容器宽度：{Math.round(size.width)}px</p>}
    </div>
  );
}

类组件示例： #

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.containerRef = React.createRef();
    this.state = { width: 0, height: 0 };
  }

  componentDidMount() {
    if (this.containerRef.current) {
      const { width, height } = this.containerRef.current.getBoundingClientRect();
      this.setState({ width, height });
    }
  }

  render() {
    return (
      <div ref={this.containerRef} className="your-container-class">
        {this.state.width > 0 && <p>容器宽度：{Math.round(this.state.width)}px</p>}
      </div>
    );
  }
}

2. 必须在渲染前获取？分两种情况处理 #

如果你的逻辑真的需要在组件渲染前就知道尺寸，得看容器尺寸是固定还是动态：

场景A：容器尺寸是固定值（比如CSS写死了width: 600px） #

直接把这个固定值抽成常量，JS和CSS共用即可，避免重复定义：

// 抽成常量，JS里直接用
const CONTAINER_WIDTH = 600;
const CONTAINER_HEIGHT = 400;

function MyComponent() {
  // 提前用这个值做逻辑
  const isWideEnough = CONTAINER_WIDTH > 500;

  return (
    <div 
      className="your-container-class"
      style={{ width: `${CONTAINER_WIDTH}px`, height: `${CONTAINER_HEIGHT}px` }}
    >
      {isWideEnough ? <p>容器够宽</p> : <p>容器较窄</p>}
    </div>
  );
}

或者用CSS变量，在JS里读取全局定义的变量：

/* 全局样式里定义 */
:root {
  --container-width: 600px;
}

function MyComponent() {
  // 直接读取CSS变量，不需要等DOM挂载
  const containerWidth = getComputedStyle(document.documentElement).getPropertyValue('--container-width');
  
  return <div className="your-container-class" style={{ width: containerWidth }}></div>;
}

场景B：容器尺寸是动态的（比如由父元素、视口大小决定） #

这种情况没办法在渲染前100%准确获取——因为浏览器还没完成布局计算。只能先做一个“占位”渲染，等挂载后获取尺寸再重新渲染正确内容，也就是方案1的思路，只是第一次渲染可能是简单的占位，第二次才是真实内容。

3. 进阶：监听尺寸动态变化 #

如果容器尺寸可能随时变化（比如窗口resize、父元素尺寸改变），推荐用ResizeObserver来监听，比传统的window.resize事件更精准，只会在容器尺寸真的变化时触发：

useEffect(() => {
  const observer = new ResizeObserver(entries => {
    entries.forEach(entry => {
      const { width, height } = entry.contentRect;
      setSize({ width, height });
    });
  });

  if (containerRef.current) {
    observer.observe(containerRef.current);
  }

  // 组件卸载时取消监听，避免内存泄漏
  return () => observer.disconnect();
}, []);

再回头解答你的疑惑：React中组件的尺寸、布局位置到底由谁定义？
和jQuery时代完全一样：

• 规则由CSS定义（不管是外部样式、内联样式还是其他CSS方案）
• 最终的布局计算由浏览器的渲染引擎完成（比如盒模型、flex/grid的布局逻辑）
• React只是负责把组件的JSX转换成真实DOM，然后把DOM交给浏览器渲染，它不插手布局计算的过程。

内容的提问来源于stack exchange，提问作者Shai UI