暂停 React 重新渲染

Question

我有一个基于 React（和 Material-UI）的网页，其中包含一个基于 Babylon JS 的 3D 视图。

我希望网页能够响应（即适应不同的 window 大小）。

但我还希望用户能够在 3D 视图中单击 Babylon JS 按钮（通过 @babylonjs/gui/2D Button.CreateImageOnlyButton 制作），以便仅将 3D 视图显示为全屏（并且使 UI 的其余部分不可见）。（也可以全屏按下按钮退出全屏模式）

function MainWindow({root}) {
    var desktopWidth = useMediaQuery('(min-width:1000px)');
    var listWidth = useMediaQuery('(min-width:600px)');
    if (desktopWidth) {
        listWidth = false;
        }
    var mobileWidth =  !(desktopWidth || listWidth);

    return <Fragment>
        {desktopWidth && <DesktopMain root={root} />}
        {listWidth && <ListMain root={root} />}
        {mobileWidth && <MobileMain root={root} />}
        </Fragment>;
    }

我的问题是，当我进入全屏模式时，MainWindow 被重新渲染。有没有办法在 3D 视图全屏时暂停 React 重新渲染？

Answer 1

如果您进入全屏模式，您可以使用 shouldComponentUpdate 并告诉它 return false。目前，文档声明如果 shouldComponentUpdate returns 为 false，将跳过 render 方法。它不会阻止子渲染，也不保证它会阻止重新渲染。防止 React 重新渲染的最好方法是不要更改状态或道具。

暂停 React 重新渲染

Pause React rerendering

reactjs

babylonjs

material-ui