学习React(四)
- componentWillMount(被放弃使用)
- render
- componentDidMount
- shouldComponentUpdate
- componentWillUpdate(被放弃使用)
- componentDidUpdate
- componentWillReceiveProps(被放弃使用)
- componentWillUnmount
- react运行的生命周期
componentWillMount(被放弃使用)
组件被挂载(渲染)到页面之前,自动执行,此时render函数,还没有执行,无法在这一步操作真实DOM
render
挂载(渲染)页面,把虚拟DOM转换成真实DOM,即定义的变量以及jsx被执行
componentDidMount
组件被挂载(渲染)到页面之后,自动执行,此时render函数,已经执行完成,可以在这一步进行DOM节点的操作
shouldComponentUpdate
组件被更新之前(即每次改变state,props的值都会执行该函数),自动执行,它会返回true或者false,返回true就继续执行componentWillUpdate,否则就不执行
componentWillUpdate(被放弃使用)
执行在shouldComponentUpdate之后,shouldComponentUpdate返回值为true,才执行componentWillUpdate,接着继续执行render函数重新渲染页面,当页面渲染完成后执行componentDidUpdate
componentDidUpdate
组件更新完成之后,自动执行
componentWillReceiveProps(被放弃使用)
该函数要执行的条件:
1.首先它要从父组件接受参数;
2.这个组件要已经在父组件中渲染过一次,才会执行,如果这个组件是第一次存在于父组件中,就不会执行
componentWillUnmount
组件被删除之前,自动执行
react运行的生命周期
1.Initialization(初始化):初始化页面在构造函数中获取props值,以及state值的设置,页面创建过程中只执行一次
2.Mounting(挂载):设置好props和state的值之后,开始挂载(渲染)页面,页面创建过程中只执行一次
3.Updation(更新):当页面中state,props的值开始改变时,执行这里的函数
4.Unmounting(销毁):页面卸载时,自动执行