React Hooks结合iframe-resizer的getPageInfo回调使用问题排查

背景 #

iframe 内有一个元素的位置依赖父页面滚动距离，需要跟随用户滚动，但由于 iframe-resizer 库的影响，sticky 和 fixed 属性失效。需要在以下两种操作触发时重新计算元素样式：

• 用户改变屏幕尺寸（如横竖屏切换），elementBreakpoint 变化时
• 用户点击UI按钮“展开”元素（使其铺满屏幕）

框架配置 #

父框架初始化代码 #

iFrameResize({
  checkOrigin: false,
  // 高度计算方式
  heightCalculationMethod: 'bodyOffset',
  // 若使用"taggedElement"，需确保iframe的DOM中存在`<div data-iframe-height></div>`
  // heightCalculationMethod: "taggedElement",
  // 检测间隔，默认32ms，这里设为1/4默认值以减少过渡延迟
  interval: 8,
  // 容差，默认0px，允许变化N像素后再触发resize事件
  tolerance: 10,
  // iframe初始化完成时调用
  initCallback: function () {
    // console.log("iframe initCallback");
  },
  // iframe尺寸变化时的回调
  resizedCallback: iframeResizeCallback,
  // 接收子iframe消息到父页面的回调
  messageCallback: function (received) {
    // console.log("message", received);
  }
}, iframeElement);

子框架初始化代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.5/iframeResizer.contentWindow.min.js"></script>

当前实现逻辑 #

我在代码中执行以下操作：

1. 在 useEffect 中向 getPageInfo 传入回调
2. 计算元素位置
3. 将父页面滚动位置存入 Redux（供其他函数使用）
4. 将计算出的位置存入 Redux（供其他元素在 style 属性中使用）

简化代码：

useEffect(() => {
  window.parentIFrame.getPageInfo((positions) => {
    // 用定时器避免Redux状态更新过于频繁
    if (getPageInfoTimeout.current) {
      clearTimeout(getPageInfoTimeout.current);
    }
    getPageInfoTimeout.current =  setTimeout(() => {
      // 计算样式并更新Redux状态
    }, 50)
  });
  return () => {
    // 清理getPageInfo回调
    window.parentIFrame.getPageInfo(false);
  }
}, [
  // 相关依赖项和UI断点
])

尝试情况 #

• useEffect：对“点击展开”操作有效，但屏幕尺寸变化时失效
• useLayoutEffect：两种操作均失效，仅在展开元素后触发滚动时，位置才会正确重计算

问题 #

请问我的代码顺序是否存在不合理之处？

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