React 生命周期的方法有哪些？

2019-03-05

回答

• getDerivedStateFromProps：在组件装载或更新时渲染前会被调用。当属性随时间而变化时可以用来更新其状态。例如在生命周期中跟踪组件的动画。只有在少数情况下，使用其他生命周期方法是有意义的。他返回一个对象来更新新的状态，或者返回 null 以表示不需要更新任何内容。此方法无权访问组件实例。
• componentDidMount：首次渲染后调用，适用于 所有的 AJAX 请求，DOM 或状态更新，以及建立任何订阅。
• shouldComponentUpdate：确定组件是否需要更新时使用。默认情况下，他返回 true。在状态或属性更新后，如果你确定组件不需要渲染，你可以返回 false。由于他允许你在组件接受到新的属性后不去重新渲染，所以他在一定程度上可以提高性能。
• getSnapshotBeforeUpdate：由于更新导致的组件重新渲染时，componentDidUpdate 之前会被立即调用。该方法返回的任何值都将作为参数传递给 componentDidUpdate。
• componentDidUpdate：主要用于更新 DOM 以响应属性或状态变化。
• componentWillUnmount：在组件卸载和销毁之前调用。主要用于处理解绑定时器，取消网络请求，移除在 componentDidMount 中创建的订阅。
• componentDidCatch：用于错误边界，他是实现此方法的组件。他允许组件去捕获其子组件树中任意位置的 JavaScript 错误，打印错误，并使用 UI 展现错误信息。但他可能在未来的版本中被废弃，改用 static getDerivedStateFromError() 来代替。

加分回答

• 装载时，以下方法在组件实例化并插入 DOM 中时会被调用，其调用顺序如下：
• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()
• 当组件的属性或状态发生变化时，他会重新进行渲染，以下方法将按照下列顺序被调用：
• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()
• 当一个组件被从 DOM 中移除时，会调用 componentWillUnmount()
• 当任何一个子组件在渲染过程中、在一个生命周期的方法中或在构造函数中发生错误时 static getDerivedStateFromError()，componentDidCatch() 将会被调用
• UNSAFE_componentWillMount()，UNSAFE_componentWillUpdate()，UNSAFE_componentWillReceiveProps() 为遗留代码，在新代码中应避免使用

返回总目录

30 秒面试系列一