react生命周期钩子函数
-
挂载 组件被实例化并挂载在DOM树
-
constructor()
作用:
组件被实例化时,构造函数就被最先执行,constructor第一行必须写super(props)语句,否则会报错
应该:
1.初始化组件的初始状态
2.bind绑定函数,修正this指向(建议箭头函数修正)
不应该:
1.向后台发送请求并更新组件状态
2.使用this.setState()初始化(不起作用,浏览器会发出警告)
-
componentWillMount()
作用:
在挂载过程中被调用一次,在render函数之前执行,在这个阶段执行this.setState()不会触发二次渲染
应该:
1.this.setState更新组件状态
2.发送AJAX异步请求(服务端渲染场景中,因为服务端渲染不会执行componentDidMount)
3.发送AJAX同步请求
不应该:
发送AJAX异步请求(浏览器渲染场景中,可能会在render的时候没有正确请求到数据)
-
render()
作用:渲染组件
-
componentDidMount()
作用:
组件挂载完成执行,且只执行一次
应该:
发送AJAX请求
不应该:
this.setState更新状态(会触发二次渲染)
-
-
更新 组件属性或者状态改变时重新渲染
-
componentWillReceiveProps()
作用:
父组件重新渲染时执行
应该:
根据props的更新同步更新组件状态
不应该:
发送异步请求
-
shouldComponentUpdate()
作用:
优化react性能,一般水平尽量不要使用,组件的状态或者属性改变时都会触发函数,但只有返回true时,组件才会被重新渲染
-
componentWillUpdate()
作用:
在没有操作shouldComponentUpdate的前提下,会紧随其后执行;在shouldComponentUpdate被操作过的情况下,componentWillUpdate用来取代componentWillReceiveProps,同步props至组件的部分状态
应该:
同步props到组件状态
不应该:
发生异步请求
-
componentDidUpdate()
作用:
组件状态及属性变化导致的重新渲染之后,主要用于请求后台数据
应该:
发送异步请求
不应该:
this.setState更新状态,会触发二次渲染
-
-
卸载 组件被移出DOM树
-
componentWillUnmount()
作用:
组件被卸载时调用,一般用来做清理操作,清理定时器,关闭socket,请求监听器等
-