React[生命周期]

[HuangHongRui]

[生命周期（Lifecycle）]

Link Link

React 的生命周期包括三个阶段：

1. mount（插入DOM）
2. update（更新渲染DOM）
3. unmount（移除DOM）

【Mounting】

mount 就是第一次让组件出现在页面中的过程。 这个过程的关键就是 render 方法。 React 会将 render 的返回值（一般是虚拟 DOM，也可以是 DOM 或者 null）插入到页面中。

当创建组件的实例并将其插入到DOM中时，将调用这些方法：

• constructor() //初始化
• componentWillMount() //插入前
• render() //渲染时
• componentDidMount() //插入后

【Updating】

mount 之后，如果数据有任何变动，就会来到 update 过程，这个过程有 5 个钩子：

1. componentWillReceiveProps(nextProps) - 我要读取 props 啦！
2. shouldComponentUpdate(nextProps, nextState) - 请问要不要更新组件？true / false
3. componentWillUpdate() - 我要更新组件啦！
4. render() - 更新！
5. componentDidUpdate() - 更新完毕啦！

【Unmounting】

当一个组件将要从页面中移除时，会进入 unmount 过程，这个过程就一个钩子：

componentWillUnmount() - 我要死啦！ 你可以在这个组件死之前做一些清理工作。

参考文章