getSnapshotBeforeUpdate()在最近呈现的输出被提交到例如DOM之前调用。它使得组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()。
此用例并不常见，但它可能出现在需要以特殊方式处理滚动位置的聊天线程等UI中。
官网的例子
class ScrollingList extends React.Component { constructor(props) { super(props); this.listRef = React.createRef(); } getSnapshotBeforeUpdate(prevProps, prevState) { // Are we adding new items to the list? // Capture the scroll position so we can adjust scroll later. if (prevProps.list.length < this.props.list.length) { const list = this.listRef.current; return list.scrollHeight - list.scrollTop; } return null; } componentDidUpdate(prevProps, prevState, snapshot) { // If we have a snapshot value, we've just added new items. // Adjust scroll so these new items don't push the old ones out of view. // (snapshot here is the value returned from getSnapshotBeforeUpdate) if (snapshot !== null) { const list = this.listRef.current; list.scrollTop = list.scrollHeight - snapshot; } } render() { return ( <div ref={this.listRef}>{/* ...contents... */}</div> ); } }
componentDidUpdate()
componentDidUpdate()更新发生后立即调用。初始渲染不会调用此方法。
将此作为在更新组件时对DOM进行操作的机会。只要您将当前道具与之前的道具进行比较（例如，如果道具未更改，则可能不需要网络请求），这也是进行网络请求的好地方。
componentDidUpdate(prevProps) { // Typical usage (don't forget to compare props): if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); } }
componentDidUpdate()但要注意，必须在一个条件下被包裹就像上面的例子中，否则会导致无限循环。它还会导致额外的重新渲染，虽然用户不可见，但会影响组件性能。
componentDidUpdate()：如果shouldComponentUpdate()返回false，则不会被调用。
这些方法被认为是遗留的，您应该在新代码中避免它们：
UNSAFE_componentWillUpdate()
UNSAFE_componentWillReceiveProps()
卸载
从DOM中删除组件时调用此方法：
componentWillUnmount()
componentWillUnmount()在卸载和销毁组件之前立即调用。在此方法中执行任何必要的清理，例如使计时器无效，取消网络请求或清除在其中创建的任何订阅componentDidMount()。
不应该调用setState()，componentWillUnmount()因为组件永远不会被重新呈现。卸载组件实例后，将永远不会再次安装它。
错误处理
在渲染期间，生命周期方法或任何子组件的构造函数中发生错误时，将调用这些方法。
static getDerivedStateFromError()
static getDerivedStateFromError(error)
在后代组件抛出错误后调用此生命周期。它接收作为参数抛出的错误，并应返回值以更新状态。
componentDidCatch()
componentDidCatch(error, info)
在后代组件抛出错误后调用此生命周期。它接收两个参数：
error - 抛出的错误。
info- componentStack包含键的对象，其中包含有关哪个组件引发错误的信息。
如果发生错误，可以componentDidCatch()通过调用呈现回退UI setState，但在将来的版本中将不推荐使用。使用static getDerivedStateFromError()处理回退，而不是渲染。
componentDidCatch()在“提交”阶段被调用，因此允许副作用。它应该用于记录错误之类的事情：
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } componentDidCatch(error, info) { // Example "componentStack": // in ComponentThatThrows (created by App) // in ErrorBoundary (created by App) // in div (created by App) // in App logComponentStackToMyService(info.componentStack); } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; } }