生命周期

Vue的生命周期

vue2

• beforeCreate( 创建前 )
• created ( 创建后 ）
• beforeMount（挂载开始之前被调用）
• mounted（挂载完成）
• beforeUpdate（数据更新之前被调用）
• updated(数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用)
• beforeDestroy（我们将要销毁整个页面或实例时调用）
• destroyed（我们的整个页面或实例被销毁之后调用）
• activated（被 keep-alive 缓存的组件激活时调用）
• deactivated（子可以看做是beforeDestory和destoryed的替代）

vue3

• setup 创建实例前
• onBeforeMount 挂载DOM前
• onMounted 挂载DOM后
• onBeforeUpdate 更新组件前
• onUpdated 更新组件后
• onBeforeUnmount 卸载销毁前
• onUnmounted 卸载销毁后

1.beforeDestory —-> beforeUnmounted 实例销毁前，此时实例并没有销毁，可以做定时器和订阅事件的清除。
2.destoryed —-> unmounted
3.新增 renderTracked 调试钩子
跟踪虚拟dom重新渲染时调用。此事件告诉你那个操作跟踪组件以及该操作的目标对象和键
4.新增 renderTriggered 调试钩子
当虚拟dom重新渲染被触发时调用，此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。

Tips

1.在setup()里调用生命周期函数，只需要加上前缀on即可
2.setup时围绕beforeCreate和created生命周期钩子运行的，所以不用显式的定义出来。
3.setup执行在beforeCreate和created之前

作者：山谣
链接：https://juejin.cn/post/7124517124080402462
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

vue生命周期对比

React的生命周期

React

组件从 被创建 到 被销毁 的过程称为组件的生命周期。
组件的生命周期可分成三个状态：

• Mounting（挂载时）
• Updating（更新时）
• Unmounting（卸载时）

组件的生命周期可分为三个阶段：

• Render： 用于计算当前的状态/更新信息，会根据产生的任务的优先级，安排任务的调度（schedule）
• Pre-commit： commit 之前，可以获取当前 DOM 的快照（snap）
• Commit： 把所有更新都 commit 到 DOM 树上

常见方法版

完整方法版

方法

contructor

constructor(props);

复制代码
通常，在 React 中，构造函数仅用于以下两种情况：

通过给 this.state 赋值对象来初始化内部 state。( 唯一可以直接修改 state 的地方)
为事件处理函数绑定实例

在 constructor() 函数中不要调用 setState() 方法。

constructor(props) {
super(props);
// 不要在这里调用 this.setState()
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}

getDerivedStateFromProps

static getDerivedStateFromProps(props, state)

这个方法是 “如何用 props 初始化 state ” 的最佳实践。
⚠️ 注意，该方法在每次 render 前都会被调用。
此方法适用于罕见的用例（表单控件获取默认值）。当 state 是从 props 获取时，就必须要维护两者的一致性，这将会增加复杂度和 bug。

shouldComponentUpate

shouldComponentUpdate(nextProps, nextState))

当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。
此方法 仅作为性能优化 的方式而存在。它的工作一般可以由 PrueComponent 自动实现。

后续版本，React 可能会将 shouldComponentUpdate 仅视为提示，并且，当返回 false 时，仍可能导致组件重新渲染。

render

render();

用于描述 DOM 结构，组件中唯一必须实现的方法。

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState);

能在组件发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。

componentDidMount

componentDidMount();

在组件挂载后（插入 DOM 树中）立即调用。在这里可以安全操作 DOM 节点、发送ajax 请求（DOM 节点的初始化）或一些副作用的事情（订阅）
如果你在这里调用了 setState，它将触发额外渲染，虽然此渲染会发生在浏览器更新屏幕之前，但会导致性能问题。

componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot);

在更新后会被立即调用。首次渲染不会执行此方法。
⚠ 注意， 如果直接调用 setState()，它必须被包裹在一个条件语句里，否则会导致死循环。

componentWillUnmount

componentWillUnmount();

复制代码
在组件卸载及销毁之前直接调用，做一些资源释放操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。
⚠️ 注意：不应调用 setState()，因为该组件将永远不会重新渲染。