🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

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


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步