React 生命周期钩子函数 当前版本16.x
定义:React中组件有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化、运行中、销毁、错误处理(16.3之后)
注意:生命周期钩子函数一定不要写成箭头函数
React 16.x 版本中共有 10个钩子函数 ,四个阶段、分别为:
- 初始化
- 运行中
- 销毁
- 错误处理
初始化阶段:
1、constructor( props )
作用:1、继承父组件属性,然后将 props 值赋值给 this.props
2、定义状态
2、componentWillMount( )
作用:1、组件即将挂载为组件的事件,为生命周期钩子做准备
2、类似于Vue中的beforeCreate()
3、这里我们在项目中不使用
3、render( )
作用:1、 利用 React.createElement( ) api将 jsx 解析为虚拟DOM对象模型
2、 计算 this.state 和 this.props
4、componentDidMount()
作用:1、数据请求、数据修改
2、操作DOM
运行阶段:
5、componentWillReceiveProps( nextProps ) //即将接收新的属性 nextProps就是新的属性
作用:新属性的接收
应用:路由的监听, 比如当路由改变时,app项目中的头部或是底部的显示
6、shouldComponentUpdate( )
作用:决定了组件是否要渲染,是 React 性能优化的关键
注意:1、一定要有返回值,返回值为 true,那么更新,false,则不更新
2、默认不写的话,就是 return true
7、componentWillUpdate() 这个钩子函数表示组件即将更新
作用:做更新前的准备工作
注意:这个钩子函数中不能使用 this.setState ( ),否则会造成栈溢出
8、render()
作用:1、jsx 转化为 VDOM对象模型
2.、计算 this.props 和 this.state
注意: 这个钩子函数中不能使用 this.setState(),否则会造成栈溢出
9、componentDidUpdate( ) 这个钩子函数表示组件更新结束
作用:可以进行 DOM 操作
注意:这个钩子函数中不能使用 this.setState(),否则会造成栈溢出
销毁阶段:
10、componentWillUnMount() 这个钩子函数表示组件销毁
16.x 版本生命周期图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RgUK5Zox-1571666489009)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1571659332111.png)]
近几个生命周期钩子函数的版本对比:
React15 和 React 16对比
主要在于初始化阶段15版本的两个钩子函数getDefaultProps( ) 和 getInitvialState( ) 在16版本中替换为了constructor( )
- React15没有错误处理阶段
- React15有两个钩子函数,React16版本是没有的
- 定义自定义属性 getDefaultProps () {}
- 定义自定义状态的 getInitalState () {}
- React16版本
- 定义自定义属性; static defaultProps= {}
- 定义自定义状态: constructor ( props ) { supser( props ) this.state = {}}
React16 和 React 17对比
-
React17去除了React16的几个钩子函数,新增了另外几个
-
去除的钩子有:
- componentWillMount
- componentWillReceiveProps
- componentWillUpdate
- componentDidCatch
-
新增的钩子有:
- static getDeivedStateFromProps
- getSnapshotBeforeUpdate
- getDerivedStateFromError