挂载卸载过程
constrctor()
完成数据的初始化,接收参数props和context。需要通过super()传入这两个参数才能使用。
componentWillMount()
组件已经经历了constructor数据初始化后,还未渲染到页面上。一般用于服务端渲染。
componentDidMount()
组件第一次渲染完成,dom节点已创建。此时可以发送ajax请求,得到新数据后setState会进行重新渲染
componentWillUnmount()
进行组件的卸载和数据的销毁。
- 移除组件中的定时器
- 移除组件中的事件监听
- 有时ajax请求未完成,调用此函数就会出现warning。 解决:设置节流阀,当进行此生命周期函数后关闭,而ajax请求需要在节流阀开启时执行。
更新过程
componentWillReceiveProps(nextProps)
在接收父组件更新后的props需要重新渲染时用的较多
接收参数nextProps,通过对比nextProps和this.props,将nextProps的state设为当前组件的state,重新渲染组件
shouldComponentUpdate(nextProps,nextState)
唯一用于控制组件重新渲染的生命周期函数
- 当setState后,state更新,就会导致组件重新渲染,此时return false就会阻止重新渲染
- 当父组件的props改变时,所有子组件就会重新渲染。但并不需要所有子组件都跟着重新渲染,因此需要在子组件的该生命周期函数中判断
componentWillUpdate(nextProps,nextState)
当shouldComponentUpdate返回true后,组件即将重新渲染,会进入此生命周期,同样可以拿到nextProps,nextState
componentDidUpdate(preProps, preState)
组件除了第一次渲染后会进入componentDidmount函数,后面重新渲染之后都会进入此函数,两个参数分别为更新前的props和state
render()
此函数会插入jsx生成的dom结构,react会生成一份虚拟dom树,每一次组件更新时,react就会在此通过diff算法比较新旧dom树的最小区别,生成补丁,重新渲染