暂停 React 重新渲染答案

【问题标题】：Pause React rerendering暂停 React 重新渲染
【发布时间】：2020-02-25 02:03:31
【问题描述】：

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

我希望网页具有响应性（即适应不同的窗口大小）。

但我也希望用户能够在 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 重新渲染？

【问题讨论】：

标签： reactjs material-ui babylonjs

【解决方案1】：

您可以使用shouldComponentUpdate 并告诉它在您进入全屏时返回false。目前，文档声明如果 shouldComponentUpdate 返回 false，将跳过 render 方法。它不会阻止子渲染，也不能保证会阻止重新渲染。防止 react 重新渲染的最佳方法是不更改状态或道具。

【讨论】：

shouldComponentUpdate 仅适用于类组件。 useMediaQuery 仅适用于功能组件。那么如何组合它们呢？
我将组件一分为二（顶部的功能组件执行 useMediaQuery，下面的类组件执行 shouldComponentUpdate）。这行得通。注意：我还需要将 setState 方法（更新下部组件中的全屏状态）替换为直接设置状态，否则全屏状态的设置也会出现，以防止基于 useMediaQuery 的重新渲染
根据文档..“不要依赖 shouldComponentUpdate 来“阻止”渲染，因为这会导致错误”