gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:24:25 25 4
gpt4 key购买 nike

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

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);

我最近发现,有时(极少)AppcomponentWillUnmount 会被调用。

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

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

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

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

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

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

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

我是不是漏掉了什么?

最佳答案

一种情况是当您使用 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);

Edit 1vp8o058p3

关于javascript - 什么情况下可以卸载根组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51621409/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com