React 生命周期：阶段答案

【问题标题】：React lifecyle: phasesReact 生命周期：阶段
【发布时间】：2019-07-24 20:06:03
【问题描述】：

据我所知，这是组件反应生命周期的“阶段”：

Mounting：Mounting 是渲染由 render 方法本身返回的 JSX 的阶段。更新：更新是更新组件状态并重新绘制应用程序的阶段。卸载：顾名思义，卸载是组件生命周期的最后一步，从页面中删除组件。

安装 -> 更新 -> 卸载

我成功使用了它，但我不知道如何将这 3 个“阶段”与： - 提交阶段 - 预提交阶段 - 渲染阶段

我发现了这个：http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

我不确定“安装”、“更新”和“卸载”是阶段还是其他。阶段是否可以是：提交、预提交和渲染。而“挂载、更新和卸载”是事件还是阶段？

有什么线索吗？

【问题讨论】：

不太清楚你在问什么，生命周期更像是事件而不是阶段，当你挂载时也这样做，当你更新时也这样做，当你被删除时清理它
基本上我想知道“提交阶段”和“挂载”（或卸载、更新）的区别。提交 = 一个阶段。 // mount = 一个事件？

标签： reactjs react-native react-redux

【解决方案1】：

“呈现阶段”和“提交阶段”是对响应更新页面的内部流程的描述。虽然了解其中发生的事情可能很有用，但您可以与之交互的唯一地方是通过各种生命周期钩子，例如 componentDidMount、componentDidUpdate 和 componentWillUnmount，所以我建议您将研究重点放在这些事情上.

当需要渲染页面时（通常是在某处调用 this.setState 引起的），react 会通过一系列步骤来更新网页：

第一组步骤统称为“渲染阶段”。在渲染阶段，react 正在创建虚拟 DOM。换句话说，它决定了页面应该是什么样子，而不需要实际更改页面。以最简单的形式（我们不会跳过任何使用 react.memo 或 shouldComponentUpdate 之类的渲染），react 在最顶层的组件上调用 render，并找出它返回的内容，然后对其每个子组件调用 render直到它知道整个页面应该是什么样子为止。

第二组步骤称为“提交阶段”。现在它知道页面应该是什么样子了，它需要更新 actual DOM 以匹配 Virtual DOM。为此，它将从渲染阶段获得的当前虚拟 DOM 与上次渲染时获得的虚拟 DOM 进行比较，并计算出最小的更新集以使页面看起来像这样。

现在渲染完成并且页面已经更新。在此过程中，可能某些组件是第一次创建的（即“已安装”），或者它们的道具已更改（即“更新”），或者它们被完全删除（“未安装”）。发生这种情况的组件将酌情调用其 componentDidMount、componentDidUpdate 和 componentWillUnmount 函数。

【讨论】：

这很可能是我找到的最好的解释...非常感谢！

【解决方案2】：

渲染阶段：用于计算更改，如果用户愿意，可能会中止。如果此阶段中止，则 DOM 不会更新。

预提交阶段：您可以在其中读取对 VDOM 所做的更改，然后再将它们应用到实际 DOM。

提交阶段：在此应用更改并触发任何副作用。

安装：在创建组件时运行一次。更新：每次对组件进行更改时运行。卸载：在组件即将被销毁时运行一次。

查看这篇文章了解详情 https://medium.com/@vmarchesin/the-react-lifecycle-step-by-step-47c0db0bfe73#:~:text=Pre%2Dcommit%20phase%3A%20Is%20a,any%20side%20effects%20are%20triggered.

【讨论】：