react组件生命周期钩子函数

6 篇文章 0 订阅

挂载期

constructor 数据接收 实现继承super(props)
componentWillMount 数据挂载之前 在constructor执行之后 可以操作数据 不可以操作dom
componentDidMount 数据挂载之后 可以操作数据和dom 适用于数据请求
render 渲染组件 和 html 标签


getDefaultProps
getInitialState
componentWillMount
render
componentDidMount

更新期

shouldComponentUpdate 检测组件内的变化 可以用作页面性能的优化(默认值为true)
componentReceiveProps 接收组件传入输入数据
componentWillUpdate 组件更新之前调用
componentDidUpdate 组件更新之后调用
render 组件更新之后渲染组件


componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

销毁期

componentWillUnmount 组件销毁时调用 可以做一些内存的优化 (全局变量,闭包,计时器,事件)

生命周期调用次数能否使用 setSate()
getDefaultProps1(全局调用一次)
getInitialState1
componentWillMount1
render>=1
componentDidMount1
componentWillReceiveProps>=0
shouldComponentUpdate>=0
componentWillUpdate>=0
componentDidUpdate>=0
componentWillUnmount1

组件生命周期的三个状态:

Mounting已插入真实 DOM
Updating正在被重新渲染
Unmounting已移出真实 DOM

生命周期的方法:

方法作用
componentWillMount在渲染前调用,在客户端也在服务端
componentDidMount在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问
componentWillReceiveProps在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用
shouldComponentUpdate返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用
componentDidUpdate在组件完成更新后立即调用。在初始化时不会被调用
componentWillUnmount组件销毁期的周期函数 在组件从 DOM 中移除之前立刻被调用
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值