react基础学习 二——生命周期
生命周期mount:
mounting装载创建
update更新
unmounting卸载
错误捕获
注意点:生命周期函数的 作用,什么之后用
只有类式组件有生命周期,函数式组件没有生命周期
mounting装载创建:——
Construct——只执行一次
作用:初始化实例
static getDerivedStateFromProps(prop,state)
有返回值,当返回值为null时,state不变;有值时,将返回对象中的属性和state的属性对应,并将state做相应修改;
作用:在render之前,可以改变state的机会,不改变,返回null
static getDerivedStateFromProps(props,state){
return null;
}
Render
作用:生产新的虚拟DOM
componentDidUpdate(p,s,shot)——只执行一次
作用:虚拟DOM变成真实的DOM,可以在页面看到视图,组件创建完成
用处:可以获取真实的DOM节点
componentDidMount(){
console.log(document.getElementById('root'))
}
update更新:——
static getDerivedStateFromProps(prop,state)
用处:父组件更新,(已挂载)子组件页更新,在子组件中更新state*****
父组件修改,因为state只在constructor的时候赋值,所以组件更新的时候,子组件的state是不修改的,可以通过这个静态函数修改state
static getDerivedStateFromProps(props,state){
return {
number: props.number
}
}
shouldComponentUpdate(nextProps,nextState)
作用:用于优化性能。如果是false就不需要走render,不用去重新计算
用处:返回bool,true——组件正常更新流程;false——后面的生命周期函数不会执行,界面不更新
Render
作用:
getSnapshotBeforeUpdate(prevProp,prevState)
必须有返回值,返回值不能为空;这个方法必须和componentDidUpdate一起使用。
作用:获取更新之前的快照,浏览器DOM结构还没有更新
用处:动画,浏览器大小,布局变化,元素宽高,位置。和原来的比较。之前滚动条的位置
componentDidUpdate(p,s,shot)
作用:更新完成之后,可以获取DOM,获取宽高
unmounting卸载:——
componentWillUnmount()——只执行一次
作用:
错误捕获:
compinentDidCatch(error,info)
作用:子组件生命周期出错,回退
流程图:
最新文章
- shell运算
- Session的工作机制详解和安全性问题(PHP实例讲解)
- 第五十篇、OC中常用的第三插件
- SQLite使用教程11 表达式
- 连不上VSS 【转】
- CFileDialog 使用简单介绍
- NodeJs之进程守护
- WindowsAzure上把WebApp和WebService同时部署在一个WebRole中
- why?
- BurpSuiteProxy安装使用
- python---文件读写-IO
- 清除wnTKYg 这个挖矿工木马的过程讲述
- .Net中json序列化与反序列化
- Git-撤销(回退)已经add,commit或push的提交
- YOLO(5) YOLO2 代码讲解
- 项目报错 exception 'RedisException' with message 'Redis server went away' in XXX
- Intellij Idea 创建JavaWeb项目入门(一)
- 在windows 下将 chm 格式的文件 转换成 html 的文件
- outline的兼容性及使用限制
- 【Oracle】DBMS_STATS.GATHER_TABLE_STATS详解