react生命周期函数

简介: react生命周期函数

React 组件的生命周期可分为三大阶段:挂载阶段(Mounting)、更新阶段(Updating)和卸载阶段(Unmounting)。

       1.挂载阶段(Mounting)


在组件被插入到 DOM 中后,会触发以下生命周期方法:

  • constructor(props): 构造函数,最先被执行,在这里设置初始状态以及绑定实例方法。
  • componentWillMount(): 组件即将被插入到 DOM 中。
  • render(): 返回实际的 JSX 元素。
  • componentDidMount(): 组件被插入到 DOM 中后立即执行。


 2.更新阶段(Updating)

当组件的 props 或 state 发生变化时,会触发以下生命周期方法


  • componentWillReceiveProps(nextProps): 当一个挂载的组件接收到新的 props 之前被调用。
  • shouldComponentUpdate(nextProps, nextState): 返回一个布尔值,用于比较新旧 props 或 state,以此来决定是否重新渲染组件。
  • componentWillUpdate(nextProps, nextState): 如果 shouldComponentUpdate 返回 truecomponentWillUpdate 会被调用。
  • render()


 3.卸载阶段(Unmounting)

当组件从 DOM 中被移除时,会触发以下生命周期方法:


  • componentWillUnmount(): 组件即将被移除时执行,通常在这里执行必要的清理工作,如无效定时器,取消网络请求等。


值得注意的是,componentWillMount、componentWillReceiveProps、componentWillUpdate、componentWillUnmount 这四个生命周期方法在 React 的新版本中已被废弃,建议使用新的生命周期方法:getDerivedStateFromProps、shouldComponentUpdate、render 和 getSnapshotBeforeUpdate、componentDidUpdate 和 componentDidMount、componentDidCatch 和 useEffect。


相关文章
|
12天前
|
前端开发 JavaScript API
react挂载后函数
react挂载后函数
7 1
|
19天前
|
前端开发 JavaScript 开发者
在React中,如何利用生命周期方法管理组件的状态和行为?
【5月更文挑战第29天】在React中,如何利用生命周期方法管理组件的状态和行为?
21 3
|
19天前
|
前端开发 JavaScript 调度
React的生命周期是什么
【5月更文挑战第29天】React的生命周期是什么
18 1
|
19天前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理按钮的点击行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理按钮的点击行为?
24 1
|
19天前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理输入框的获取和失去焦点行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理输入框的获取和失去焦点行为?
24 1
|
1月前
|
前端开发 JavaScript 开发者
掌握React中的useEffect:函数组件中的魔法钩子
掌握React中的useEffect:函数组件中的魔法钩子
|
1月前
|
存储 前端开发 安全
深入理解React中的useState:函数组件状态管理的利器
深入理解React中的useState:函数组件状态管理的利器
|
1月前
|
前端开发 JavaScript
React Hooks:让你轻松掌握函数组件的状态与管理
React Hooks:让你轻松掌握函数组件的状态与管理
|
1月前
|
JavaScript 前端开发 API
vue中nextTick函数和react类似实现
vue中nextTick函数和react类似实现
78 0
|
1月前
|
存储 前端开发 JavaScript
探索React中的类组件和函数组件
探索React中的类组件和函数组件

热门文章

最新文章