React生命周期钩子函数

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