在 `componentDidMount` 生命周期方法中检查组件是否挂载不是很可笑吗？答案

【问题标题】：Isn't it ridiculous to check if a component is mounted within the `componentDidMount` life cycle method?在 `componentDidMount` 生命周期方法中检查组件是否挂载不是很可笑吗？
【发布时间】：2020-03-25 09:00:36
【问题描述】：

很长一段时间以来，我一直认为我放在componentDidMount 生命周期方法中的代码只有在组件被挂载时才会被调用。但现在有人告诉我，情况可能并非总是如此。例如，当我在 componentDidMount 方法中获取一些数据时，用户可以导航到另一个组件并导致我的组件卸载。当数据提取完成时，他们告诉我，数据提取后的代码行继续天真地执行，就好像组件仍然挂载一样，这会导致一些令人讨厌的错误。确保我的代码在我的组件被卸载时不运行，并且只有在它被安装时才恢复，这难道不是 react 的工作吗？

【问题讨论】：

这是因为获取数据是一个异步任务。逻辑是这样的：组件安装 > 调用异步获取 > 用户更改视图 > 同时异步获取完成并使用新数据调用 setState > 响应尝试相应地更新状态但找不到它了。 React 不能也不应该只是取消你的承诺。
为什么调用setState会报错？如果我的组件不在视图中，为什么允许某些异步任务修改其状态，他们不应该为我检测到吗？

标签： reactjs

【解决方案1】：

UI 编程通常必须是异步的，这样按下按钮就不会冻结整个视觉效果。因此，必须在框架中保留灵活性，就像不要仅仅为了等待生命周期方法而停止一切。这是程序员的工作。 API 只是承诺 componentDidMount 在某个时候被调用，没有别的。

如果您预计 componentDidMount 中的进程会长时间运行，您可以定期检查是否已调用 componentWillUnmount，如果是则取消执行。

【讨论】：

你是说我必须检查componentUnmount是否被调用，然后取消任务。为什么他们不能为我这样做？知道何时调用componentUnmount，为什么他们不能取消任务（或忽略即将到来的setState 调用）？为什么我必须费心检查...我的意思是谁会对更新不在视图中的组件的状态感兴趣？
React 确实会破坏组件，并且在组件卸载后不会再调用 render()。 ComponentWillUnmount 向您发出信号，表明您不能再确保组件正常工作，例如设置状态。请参阅此讨论：stackoverflow.com/questions/39767482/…。值得注意的是cancellable是处理中间进程卸载的正确方式。