javascript - 什么情况下可以卸载根组件？

Question

我有一个根组件来初始化和托管整个应用程序，简化后看起来像

class App extends React.Component {
    componentDidMount() {
        // initialisation here
    }

    componentWillUnmount() {
        // I expect this to never happen
    }

    render() {
        // the whole app is rendered here
    }
}

它在页面上的呈现非常简单(我只做了一次，该脚本在页面加载时运行，再也不会被调用)

ReactDOM.render(<App />, domElement);

我最近发现，有时(极少)App 的 componentWillUnmount 会被调用。

上次它发生在移动版 chrome 67 上，但在桌面版上也观察到了。

我用一个虚拟的 raven.captureMessage('application will unmount'); 捕获了那个事件(其中 raven 是一个哨兵客户端)，所以此时我不'还有更多详细信息。

但是完全让我吃惊的是:根组件在什么情况下可以被react卸载？没有 JS 接触 react 管理的 DOM，最后一次发生在我认识的一个人的手机上，它是一个没有任何修改的普通 chrome 浏览器。

我和那个人谈过 - 他们提到应用程序在视觉上看起来很正常(但由于明显的原因它没有正常运行 - 因为我取消了那里的东西)。

另一个奇怪的时刻是，如果该组件的 componentDidMount 发生不止一次(通过模块范围的变量)并且没有被调用，我也会记录。

所以总结一下:componentWillUnmount 被调用了，DOM 节点没有被移除，连续的 componentDidMount 没有被调用(这个序列对我来说听起来难以置信，但那是我观察到的)。

另一件重要的事情:对于最新的案例，它恰好发生在 chrome 取消休眠选项卡之后(chrome 在休眠或其他选项卡需要 ram/cpu 时将选项卡置于休眠状态)。

我是不是漏掉了什么？

Answer 1

一种情况是当您使用 ReactDOM 将另一个组件渲染到根容器中时:

const rootElement = document.getElementById('root');
const OtherComponent = () => <p>test</p>;

class App extends Component {    
    componentWillUnmount() {
        console.log('will unmount');
    }

    handleRenderOtherComponent = () => {
        ReactDOM.render(<OtherComponent />, rootElement);
    };

    render() {
        return (
            <button onClick={this.handleRenderOtherComponent}>
                remove root
            </button>
        );
    }
}

ReactDOM.render(<App />, rootElement);