为了理解React的工作过程,我们就必须要了解React组件的生命周期,如同人有生老病死,每个组件在网页中也会被创建、更新和删除,如同有生命的机体一样。
React生命周期宏观梳理
React严格定义了组件的生命周期,生命周期经历如下三个过程:
Mount(装载过程)
装载过程,就是把组件第一次在DOM树中渲染的过程。
当组件第一次被渲染的时候,依次调用的函数是如下这些:
- constructor()——初始化props和state,绑定成员的this环境。
- componentWillMount()——将要装载,这个时候没有任何渲染出来的结果。
- render()——将render函数中return的内容渲染到浏览器页面上,即组件内容。
- componentDidMount()——组件已经被装载到dom树上,可以做的事情如下:加载数据、获取dom元素;该函数只在浏览器端执行。
Update(更新过程)
更新过程,当组件被重新渲染的过程。
- componentWillReceiveProps(nextProps)——专门读取props
- shouldComponentUpdate(nextProps,nextState)——请问要不要更新组件?要求返回结果,布尔值,即(true/false);功能:可以在此函数里优化代码。
注:只有返回true的时候,才会执行以下三个函数 - componentWillUpdate()——更新组件之前
- render()——更新!
- componentDidUpdate()——更新完毕!
Unmount(卸载过程)
卸载过程,组件从DOM中删除的过程。
- componentWillUnmount()——销毁组件。