记录React 组件的生命周期

React 严格定义了组件的生命周期，一般来说 React 的生命周期经历如下 3 个 阶段：

• 装载过程(Mount)，也就是把组件第一次在 DOM 树中渲染的过程
• 更新过程(Update)，组件重新渲染的过程
• 卸载过程(Unmount)，组件从 DOM 中删除的过程

上面的 3 个阶段，React 库会依次调用组件的一些成员函数，这些成员函数就是 React 的生命周期函数，我们对 React 组件的操作都穿插在它的生命周期函数里面

装载过程

我们先来看装载过程，当组件第一次给渲染时，依次调用的生命周期函数如下：

• constructor ：这个是构造方法，我们可以在这里接收 props 和设置 state，bind 函数调用时的 this 始终指向当前组件
• componentWillMount ：这是在 render 方法执行前调用的，此时还没开始渲染，调用 this.setState 方法也不会引发重新绘制，不过这里能干的事情都能放到构造方法里面去，所以很少用到这个函数
• render：这个函数无疑是 React 组件最重要的函数，它实际上不做实际的渲染动作，它的工作就是返回一个 JSX 描述的结构，让 React 库来依据这个结构来进行 DOM 的渲染，如果返回是 null 或者 false，就是告诉 React 当前组件无需进行绘制操作
• componentDidMount：当 React 库将组件渲染完成并已经装到 DOM 上面时，就会回调这个函数(也就是 render 执行结束后并不会立即调用这个函数)，而且这个函数只会在浏览器上面