在React钩子清理中可以安全使用requestAnimationFrame吗

编程问答 2022-07-25

问题描述

当同级组件安装和卸载时，我正在尝试调整画布的大小。我精简的JSX结构是这个

<FlexContainer>
  <MyCanvasWrapper> // flex-grow is 1
    <canvas width="1000" />
  </MyCanvasWrapper>

  <MyComponent /> // static 300px width
</FlexContainer>

在安装MyComponent时，我需要调用一个调整大小的函数，该函数将读取MyCanvasWrapper的布局宽度并将canvas属性设置为相同的大小。

我在MyComponent中使用此钩子

  useLayoutEffect(() => {
    console.log('mount');
    resize();

    return () => {
      window.requestAnimationFrame(() => {
        console.log('unmount');
        resize();
      });
    };
  },[]);

从外观上看，这就像我想要的那样工作，但是我的直觉告诉我，requestAnimationFrame在这种情况下是代码味道。如果像挂载阶段那样仅调用resize（挂载调整大小始终有效，无论是否进行清理），宽度都不会改变。我通过将css和resize函数附加到一个按钮，在宽度更改失败后可以单击该按钮，从而确定了它的功能。这给我带来了一个模糊的调用栈问题，其中useLayoutEffect清理被调用的太早了？在这一点上我还是一无所知。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptreact-hooksreactjsreactjs