一、从组件的一般挂载与卸载的过程来分 二、从组件数据更新过程来划分
<code>constructor</code> <code>ES6</code>创建方式中的构造函数,在组件实例化的时候就会调用,创建组件的时候会默认添加<code>constructor</code>函数,如果你要添加<code>state</code>状态等的就要手动添加,不然可以省去。
<code>componentWillMount</code> 组件渲染前调用的钩子函数,一般在这个钩子函数里面设置<code>state</code>或者请求数据给<code>state</code>赋值
<code>render</code>渲染组件的钩子函数,可以说是每个组件都要用的钩子函数(无状态组件)直接<code>return</code>
<code>componentDidMount</code>组件渲染之后调用的钩子函数。一般用处:获取真实的DOM元素节点(原生js操作DOM),进行DOM操作
<code>componentWillUnmount</code>组件卸载的时候调用的钩子函数。一般作用在<code>componentDidMount</code>钩子函数中进行的事件绑定的移除。
code代码见下面
在浏览器中运行结果

<code>componentWillReceiveProps(nextProps)</code>获取父组件才会执行的钩子函数
<code>shouldComponentUpdate(nextProps,nextState)</code>重新设置<code>state</code>的值的时候就会调用,在默认情况下,<code>showComponentUpdate</code>函数都返回true
<code>componentWillUpdate</code>在组件渲染前调用
<code>componentDidUpdate</code>在组件渲染之后调用
代码详见
运行结果如下图