React-PDF 中实现页面宽度百分比布局的技术方案

背景介绍

在React-PDF项目中，开发者经常需要处理PDF文档的渲染和展示。一个常见的需求是希望Page组件的width属性能够支持百分比值，以实现响应式布局。然而，React-PDF底层依赖于PDF.js，而PDF.js要求传入的是绝对像素值，这导致直接使用百分比布局存在技术限制。

核心问题分析

React-PDF的Page组件目前仅支持像素单位作为宽度值，这在实际开发中会带来以下挑战：

1. 无法直接实现基于父容器宽度的百分比布局
2. 响应式设计受到限制
3. 不同屏幕尺寸下的适配需要额外处理

解决方案

方案一：使用ResizeObserver Hook

仓库所有者建议使用ResizeObserver来监听父容器尺寸变化。这是一种现代且高效的解决方案：

import { useResizeObserver } from 'your-hooks-library';

function PDFViewer() {
  const [width, setWidth] = useState(800);
  const containerRef = useRef(null);
  
  useResizeObserver(containerRef, (entries) => {
    const entry = entries[0];
    setWidth(entry.contentRect.width * 0.9); // 90%宽度
  });

  return (
    <div ref={containerRef}>
      <Page width={width}>
        {/* PDF内容 */}
      </Page>
    </div>
  );
}

方案二：使用useLayoutEffect手动计算

提问者提供的解决方案是使用useLayoutEffect结合ref来手动计算宽度：

function PDFViewer() {
  const [width, setWidth] = useState(800);
  const componentRef = useRef(null);
  
  useLayoutEffect(() => {
    if (componentRef.current) {
      setWidth(componentRef.current.offsetWidth * 0.5); // 50%宽度
    }
  }, [componentRef]);

  return (
    <div ref={componentRef}>
      <Page width={width}>
        {/* PDF内容 */}
      </Page>
    </div>
  );
}

技术细节解析

1. useLayoutEffect vs useEffect
   useLayoutEffect会在DOM更新后同步执行，适合在这里使用，因为它能确保在浏览器绘制前获取到最新的尺寸信息。

2. 性能考虑
   两种方案都会在容器尺寸变化时触发重新渲染，但ResizeObserver方案更加精确和高效，因为它专门为监听元素尺寸变化而设计。

3. 兼容性考虑
   如果项目需要支持较旧的浏览器，可能需要为ResizeObserver添加polyfill。

最佳实践建议

1. 对于现代浏览器环境，优先使用ResizeObserver方案
2. 添加防抖处理以避免频繁重渲染
3. 考虑设置最小宽度保证PDF的可读性
4. 在SSR环境下要注意客户端hydration时的尺寸计算

扩展思考

虽然React-PDF本身不支持百分比宽度，但这种限制也带来了一些好处：

1. 渲染结果更加可控和一致
2. 避免了因容器尺寸变化导致的布局抖动
3. 简化了PDF.js的底层实现

开发者可以根据实际项目需求，选择最适合的响应式布局方案，平衡开发便利性和性能表现。