返回介绍

React 生命周期方法有哪些?

发布于 2024-09-16 12:15:01 字数 1906 浏览 0 评论 0 收藏 0

React 16.3+

  • getDerivedStateFromProps: 在调用 render() 之前调用,并在 每次 渲染时调用。 需要使用派生状态的情况是很罕见得。值得阅读 如果你需要派生状态 .
  • componentDidMount: 首次渲染后调用,所有得 Ajax 请求、DOM 或状态更新、设置事件监听器都应该在此处发生。
  • shouldComponentUpdate: 确定组件是否应该更新。 默认情况下,它返回 true 。 如果你确定在更新状态或属性后不需要渲染组件,则可以返回 false 值。 它是一个提高性能的好地方,因为它允许你在组件接收新属性时阻止重新渲染。
  • getSnapshotBeforeUpdate: 在最新的渲染输出提交给 DOM 前将会立即调用,这对于从 DOM 捕获信息(比如:滚动位置)很有用。
  • componentDidUpdate: 它主要用于更新 DOM 以响应 prop 或 state 更改。 如果 shouldComponentUpdate() 返回 false ,则不会触发。
  • componentWillUnmount 当一个组件被从 DOM 中移除时,该方法被调用,取消网络请求或者移除与该组件相关的事件监听程序等应该在这里进行。

Before 16.3

  • componentWillMount: 在组件 render() 前执行,用于根组件中的应用程序级别配置。应该避免在该方法中引入任何的副作用或订阅。
  • componentDidMount: 首次渲染后调用,所有得 Ajax 请求、DOM 或状态更新、设置事件监听器都应该在此处发生。
  • componentWillReceiveProps: 在组件接收到新属性前调用,若你需要更新状态响应属性改变(例如,重置它),你可能需对比 this.propsnextProps 并在该方法中使用 this.setState() 处理状态改变。
  • shouldComponentUpdate: 确定组件是否应该更新。 默认情况下,它返回 true 。 如果你确定在更新状态或属性后不需要渲染组件,则可以返回 false 值。 它是一个提高性能的好地方,因为它允许你在组件接收新属性时阻止重新渲染。
  • componentWillUpdate:shouldComponentUpdate 返回 true 后重新渲染组件之前执行,注意你不能在这调用 this.setState()
  • componentDidUpdate: 它主要用于更新 DOM 以响应 prop 或 state 更改。 如果 shouldComponentUpdate() 返回 false ,则不会触发。
  • componentWillUnmount: 当一个组件被从 DOM 中移除时,该方法被调用,取消网络请求或者移除与该组件相关的事件监听程序等应该在这里进行。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文