React 生命周期

目录

React 生命周期图

一、生命周期路径一，初始化组件过程

1、getDefaultProps

2、getInitialState

3、componentWillMount

4、render（渲染）

5、componentDidMount

二、生命周期路径二，更新组件过程

更新组件常用的两种方式：

三、生命周期路径三，卸载组件过程

---

React 生命周期图

图是盗的，可以分为 1、 2、 3 部分过程。

一、生命周期路径一，初始化组件过程

     可以参考：https://www.runoob.com/try/try.php?filename=try_react_life_cycle2

1、getDefaultProps

这是由外部传入数据的阶段，也可以不传，传入的数据途径：（1）connect数据到props；（2）父组件传入到子组件的props中。

2、getInitialState

这里保存的是组件内的状态，如果这个状态改变了，这个组件就会重新 render

3、componentWillMount

在渲染前调用

4、render（渲染）

渲染组件

5、componentDidMount

在组件第一次渲染后调用，之后组件就生成的真实的 DOM结构，可以通过this.getDOMNode()来进行访问。

这里主要可以做一些异步ajax数据加载，数据加载可以通过 更改组件内state 更新组件，也可以通过 props的方式从外部传入更新组件。

二、生命周期路径二，更新组件过程

更新组件常用的两种方式：

1、componentDidMount

这个方法内 通过ajax方式获取数据，更新组件内state，触发组件重新渲染。

2、父组件更新子组件的属性，传入到子组件的 props 的方式，子组件的 componentWillReceiveProps 方法接收到新的props，然后比对与旧的 props是否一致，如果不一致则更改组件内state，触发组件重新渲染。

两种方式都会更改组件内state，更改后路径如下：

1、触发 shouldComponentUpdate 方法

2、触发 componentWillUpdate

3、render

4、componentDidUpdate

三、生命周期路径三，卸载组件过程

卸载组件会触发 componentWillUnmount 方法，这个方法内可以做一些资源的释放工作。