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

本贴最后更新于 1360 天前,其中的信息可能已经物是人非

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 秒面试系列一

  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    317 引用 • 1392 回帖
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    190 引用 • 289 回帖 • 494 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
Vanessa
我们终此一生,就是要摆脱他人的期待,找到真正的自己。 昆明