说说React生命周期有哪些不同的阶段?每个阶段对应的方法是?

简介: 说说React生命周期有哪些不同的阶段?每个阶段对应的方法是?

React生命周期

一共有三个阶段,分别为

挂载阶段(Mounting):已插入真实的Dom阶段

更新阶段(Updating):正在被重新渲染的阶段

卸载阶段(Unmounting):已移出真是dom阶段

挂载阶段:

constructor() 在 React 组件挂载之前,会调用它的构造函数。

  • componentWillMount: 在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。
  • componentDidMount(): 在组件挂载后(插入 DOM 树中)立即调用

更新运行阶段:

componentWillReceiveProps: 在接受父组件改变后的props需要重新渲染组件时用到的比较多,外部组件传递频繁的时候会导致效率比较低

shouldComponentUpdate(): 用于控制组件重新渲染的生命周期,state发生变化,组件会进入重新渲染的流程,在这里return false可以阻止组件的更新

render(): render() 方法是 class 组件中唯一必须实现的方法。

componentWillUpdate(): shouldComponentUpdate返回true以后,组件进入重新渲染完成之前进入这个函数。

componentDidUpdate(): 每次state改变并重新渲染页面后都会进入这个生命周期

销毁阶段

componentWillUnmount (): 在此处完成组件的卸载和数据的销毁。


相关文章
|
2天前
|
前端开发
react生命周期的一些坑
react生命周期的一些坑
|
2天前
|
前端开发
【专栏】在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法
【4月更文挑战第29天】本文介绍了在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法。首先,通过 `npm` 安装 less 或 sass 依赖,然后修改 `config-overrides.js` 配置文件以支持 less/sass 编译。接着,详细阐述如何使用 less/sass 编写样式。再者,安装 react-css-modules 并配置 webpack,使能样式模块化。最后,展示了如何结合使用 less/sass 和 react-css-modules,以提升前端开发的效率和代码质量。
|
2天前
|
存储 人工智能 开发框架
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
29 0
|
2天前
|
前端开发 JavaScript
React生命周期方法在实际开发中的应用场景有哪些?
【4月更文挑战第6天】 React 生命周期方法应用于数据获取、订阅管理、渲染逻辑处理、用户交互响应、性能优化、资源清理、强制更新、错误处理、动画实现、代码分割、服务端渲染、路由处理、依赖注入和集成第三方库。它们帮助控制组件行为和性能,但现代开发推荐使用Hooks替代部分生命周期方法。
18 0
|
2天前
|
前端开发 JavaScript
react生命周期函数
react生命周期函数
11 0
|
2天前
|
前端开发 JavaScript 开发者
浅谈React生命周期
浅谈React生命周期
13 0
|
2天前
|
前端开发 中间件 数据安全/隐私保护
React路由进阶方法
React路由进阶方法
29 1
|
2天前
|
前端开发
React旧有生命周期和新生命周期的解析
React旧有生命周期和新生命周期的解析
30 0
React旧有生命周期和新生命周期的解析
|
2天前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
78 1
|
2天前
|
前端开发
React 中条件渲染的 N 种方法
React 中条件渲染的 N 种方法
21 3

热门文章

最新文章