1.Angular

image.png

image.png

生命周期 • Angular

2.Vue

image.png

生命周期钩子 | Vue.js

3.React

旧的生命周期方法

image.png

挂载阶段（Mounting）
constructor(props): 构造函数，在组件初始化时调用，用于初始化状态或绑定事件处理函数。

static getDerivedStateFromProps(props, state): 静态方法，在组件创建和更新时被调用，返回一个对象来更新状态，或在任何情况下返回null。

render(): 必须的方法，当组件需要被更新时调用，返回React元素。

componentDidMount(): 在组件挂载后（插入DOM树中）立即调用，通常用于执行需要DOM节点的操作或网络请求。

更新阶段（Updating）
static getDerivedStateFromProps(props, state): 如上所述，在更新时也会调用。

shouldComponentUpdate(nextProps, nextState): 返回一个布尔值，决定组件是否需要更新。

render(): 如上所述。

getSnapshotBeforeUpdate(prevProps, prevState): 在最近一次渲染输出（DOM树）之前调用，它返回的任何值将作为参数传递给componentDidUpdate()。

componentDidUpdate(prevProps, prevState, snapshot): 在更新后会被立即调用，首次渲染不会执行此方法。

卸载阶段（Unmounting）
componentWillUnmount(): 在组件卸载及销毁之前直接调用，通常用于执行清理操作，如清除计时器或取消网络请求。

新的生命周期钩子（React 16.8及以后）

image.png

由于类组件的生命周期在某些情况下可能导致问题（三个will函数，例如，componentWillMount和componentWillReceiveProps），React引入了函数组件和钩子（Hooks），并推荐使用这些新的API来替代旧的类组件生命周期方法。

函数组件和Hooks

useState: 用于在函数组件中添加状态。

useEffect: 用于在函数组件中执行副作用操作（如数据获取、订阅或手动更改DOM）。它类似于componentDidMount、componentDidUpdate和componentWillUnmount的组合。

useLayoutEffect: 与useEffect相似，但它会在所有的DOM变更之后同步调用，主要用于读取DOM布局并同步重新渲染。

useRef: 用于在函数组件中存储对DOM节点的引用或任何可变值而不触发重新渲染。

useContext: 允许函数组件访问React的Context API。

useReducer: 用于管理组件状态的一种替代方式，尤其是对于更复杂的状态逻辑。

useCallback 和 useMemo: 用于性能优化，分别用于缓存回调函数和缓存计算结果。

useImperativeHandle 和 useDebugValue: 提供更细粒度的控制能力，通常用于库开发者。

总结
对于新的React项目和重构现有项目，推荐使用函数组件和Hooks而不是类组件的生命周期方法。Hooks提供了更简洁、更直观的方式来处理副作用、状态等，同时也避免了类组件中常见的陷阱和问题。如果你正在维护一个旧的React项目，理解并适当使用旧的类组件生命周期方法仍然很重要。但在开发新功能时，优先考虑使用Hooks。