react生命周期

一直没有时间去总结一下Vue和刚刚 开始学习的react,接下来的时间会注重这两个框架总结,如有总结不对 的地方欢迎指正,好了开始进入正题
今天先说说react吧
react的生命周期:
1、mounted阶段 加载阶段 或者说初始化阶段 这个阶段组件由jsx(虚拟dom)转换成真实dom
2、update阶段 组件运行中阶段 或者更新阶段 当组件修改自身状态,或者父组件修改子组件属性的时候发生的阶段
3、umount阶段 组件卸载阶段 销毁 这个一般是组件被浏览器回收的阶段

他的每一阶段对应的钩子函数有:
*第一阶段
componentWillMount 即将进入dom 将要装载,在render之前调用;(还未装载就是挂载和vue的钩子函数是一个意思一样)
render 描画dom
componentDidMount 已经进入dom 加载完成组件已经加载完成

*
2、具体的声明函数周期—运行中阶段 数据更新过程
运行中阶段只有在父组件修改了子组件的属性或者说一个组件修改自身的状态才会发生的情况

1、组件将要接受新值componentWillReceiveProps(已加载组件收到新的参数时调用)
2、组件是否更新 shouldComponentUpdate (影响整个项目的性能,决定视图的更新)
3、组件即将更新 componentWillUpdate
4、必不可少的render
5、组件更新完毕时运行的函数 componentDidUpdate
3 销毁时 componentWillUnmount
卸载组件:ReactDOM.unmountComponentAtNode( 节点 )

在网上开了很多文章 发现了一个很有意思的就是就是具体应该在哪个钩子函数里面发起ajax请求
在生命周期中的哪一步你应该发起 AJAX 请求?
我们应当将AJAX 请求放到 componentDidMount 函数中执行,主要原因有下:
React 可能会多次频繁调用 componentWillMount,如果我们将 AJAX 请求放到 componentWillMount 函数中,那么显而易见其会被触发多次,自然也就不是好的选择。

如果我们将 AJAX 请求放置在生命周期的其他函数中,我们并不能保证请求仅在组件挂载完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成,并且调用了setState函数将数据添加到组件状态中,对于未挂载的组件则会报错。而在 componentDidMount 函数中进行 AJAX 请求则能有效避免这个问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值