reactjs - react 生命周期 : phases

Question

据我所知，这是组件 React 生命周期的“阶段”:

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

挂载 -> 更新 -> 卸载

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

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

我不确定“安装”、“更新”和“卸载”是阶段还是其他。阶段可能是:提交、预提交和呈现。而“安装、更新和卸载”是事件还是阶段？

有什么线索吗？

Answer 1

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

当渲染页面时(通常是在某处调用 this.setState 引起的)，React 会执行一系列步骤以更新网页:

第一组步骤统称为“渲染阶段”。在渲染阶段，React 正在创建虚拟 DOM。换句话说，它是在不实际更改页面的情况下确定页面的外观。在最简单的形式中(我们不会跳过 react.memo 或 shouldComponentUpdate 之类的任何渲染)，react 在最顶层组件上调用 render，并找出它返回的内容，然后针对它的每个子组件在这些组件上调用 render直到它知道整个页面应该是什么样子。

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

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