首先就是总结react的生命周期,总结为三大生命周期;
分别为:挂载、更新、销毁
下面进行逐个解析:
componentDidMount()会在组件挂在后(插入DOM树中)立即调用。
componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。
componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作,例如,清除 timer,取消网络请求或清除在 componentDidMount() 中创建的订阅等。
static getDerivedStateFromError(error) 此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数,并返回一个值以更新 state。
componentDidCatch(error, info)
此生命周期在后代组件抛出错误后被调用。 它接收两个参数:
1. error —— 抛出的错误。
2. info —— 带有 componentStack key 的对象,其中包含有关组件引发错误的栈信息。
拓展小内容:
shouldComponentUpdate(nextProps, nextState)
根据 shouldComponentUpdate() 的返回值,判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下,推荐你还是应该遵循默认行为。首次渲染或使用 forceUpdate() 时不会调用该方法。
static getDerivedStateFromProps(props, state)
getDerivedStateFromProps 会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state,如果返回 null 则不更新任何内容
getSnapshotBeforeUpdate(prevProps, prevState)
getSnapshotBeforeUpdate() 在最近一次渲染输出(提交到 DOM 节点)之前调用。一般可以用于滚动式聊天记录等等,它使得组件能在发生更改之前从 DOM 中捕获一些信息(例如,滚动位置)。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。