关于React生命周期的补充
发布于2021-05-30 11:20 阅读(644) 评论(0) 点赞(16) 收藏(1)
之前有写过关于 React 的生命周期的一些文章，此文就对之前的文章进行基础知识的巩固和补充，同时也是自己对知识点的回顾过程。
React 生命周期一共分为三个阶段：初始化阶段（Mounting）、运行中阶段（Updating）、销毁阶段（Unmounting）
一、初始化阶段
1、设置组件的默认属性
static defaultProps = {
name:'zhangsan',
age:23
}
2、设置组件的初始化状态
class MyCompontent extends React.Compontent {
constructor(props) {
super(props)
this.state = {
value:'Hello'
}
}
}
3、componentWillMount()
组件即将被渲染到页面前触发。
4、render()
组件渲染
5、componentDidMount()
组件已经渲染在页面上时触发，此时已经有了真正的DOM，可以进行一些DOM的相关操作，也可以进行开启定时器、向服务器发送请求等操作。
二、运行中阶段
1、componentWillReceiveProps()
组件接收到一个新的 prop 时触发，在初始化 render 时不会调用。
2、shouldComponentUpdate()
返回一个布尔值，当组件接收到新属性或是组件的状态发生改变时触发，即接受到新的 props 或 state 时调用，首次渲染并不会触发。
shouldComponentUpdate(newProps, newState) {
if(判断条件) return true
return false
}
该组件接收两个参数：新属性和新状态，通过返回的布尔值来判断是否需要更新。
3、componentWillUpdate()
组件即将被更新时触发，即接受到新的 props 或 state 但还没有 render 时调用。
4、componentDidUpdate()
组件更新完成时立即触发，此时已经有了新的DOM元素，可以进行DOM操作。
三、销毁阶段
componentWillUnmount()
组件被销毁时触发，在函数中可以进行一些清理操作，如清空定时器、取消订阅等。
原文链接:https://blog.csdn.net/fish_skyyyy/article/details/117336043
所属网站分类: 技术文章 > 博客
作者：哦八戒八戒
链接：http://www.qianduanheidong.com/blog/article/115932/7257e8090e5613977254/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力