react的生命周期笔记

1  getDefaultProps(){}

2 getInitialState(){}

3 componentWillMount(){} 这个阶段特点

a 可以获取this数据 不能获取dom

b 修改数据 可以直接引起页面的改变

c 修改数据 不会触发运行中的生命周期

这个生命周期没什么用(千万不要在这个周期做网络请求)

原因:react在16版本有一个大更新,更新节点从16.3版本,16.3版本之前是同步渲染,

16.3之后变成异步渲染(fiber)之后导致问题:渲染前的生命周期可能会被意外情况打断,一旦被打断之后,生命周期会重新执行,所以在这里放网络请求会导致网络请求的多次发出

该生命周期在17版本后被废弃,现阶段是不安全的生命周期

注:componentWillMount->UNSAFE_componentWillMount

这些生命周期钩子已重命名,你仍然可以使用旧版本周期函数,但控制台会警告

4 componentDidMount(){}

a 有dom 有数据 、可以做网络请求,做初始化的操作,初始化swiper、better-scroll

b 数据的修改不能直接引起页面的改变,需要通过setState

c 数据的修改会触发运行中的生命周期

5 shouldComponentUpdate(props,state){}

a 该生命周期控制数据修改是否要更新页面

返回true  更新   返回 false 不更新

b 通过该生命周期减少无关的页面更新

c 参数props和state是将要更新的数据

this里的props和state指的是更新前的数据(还没更新的数据)

6 componentWillUpdate(){}

a 页面更新前触发

b 数据dom元素都是更新之前的也是在render之前

该生命周期也将要被废弃

c will和did减少数据更新的操作

7 componentDidUpdate(){}

注意:

a 不要在更新里做更新数据的操作,因为会引起死循环

b 在更新操作结束之后触发,数据和dom都是修改之后的

8 componentWillReceiveProps(props){

 a 监听props发生改变

 b 参数里是更新之后的数据 

  c this里是更新之前的数据

9 componentWillUnMount(){}

a 擦屁股解决遗憾的操作

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容