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 执行结束后并不会立即调用这个函数),而且这个函数只会在浏览器上面