本人是转载kiinlam github

实例化

首次实例化

getDefaultProps
getInitialState
componentWillMount
render
componentDidMount

实例化完成后的更新

getInitialState
componentWillMount
render
compoentDidMount

存在期

组件已存在时的状态改变

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

销毁&清理期

componentWillUnmount

说明

生命周期共提供了10个不同的API。

1.getDefaultProps

作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。

2.getInitialState

作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问this.props。

3.componentWillMount

在完成首次渲染之前调用，此时仍可以修改组件的state。

4.render

必选的方法，创建虚拟DOM，该方法具有特殊的规则：

只能通过this.props和this.state访问数据
可以返回null、false或任何React组件
只能出现一个顶级组件（不能返回数组）
不能改变组件的状态
不能修改DOM的输出

5.componentDidMount

真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。

在服务端中，该方法不会被调用。

6.componentWillReceiveProps

组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。

    componentWillReceiveProps: function(nextProps) {if (nextProps.bool) {this.setState({bool: true});}}

7.shouldComponentUpdate

组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。

在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用

8.componentWillUpdate

接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。

9.componentDidUpdate

完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。

10.componentWillUnmount

组件被移除之前被调用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。

转载于:https://www.cnblogs.com/shirly77/p/6697513.html

React的生命周期相关推荐

附实例！图解React的生命周期及执行顺序
本文由云+社区发表作者:前端林子 1.七个可选的生命周期可以结合下图来看: (1) componentWillMount() 仅在render()方法前被调用一次,如果在该方法中调用了setSta ...
react组件生命周期_React组件生命周期-挂钩/方法介绍
react组件生命周期 React components have several lifecycle methods that you can override to run your code a ...
[react] 说说react的生命周期有哪些？
[react] 说说react的生命周期有哪些? 装载阶段组件第一次被渲染时的阶段,这一阶段相关的生命周期函数有: constructor componentWillMount render com ...
react初识生命周期
好多朋友都在问我react生命周期执行的顺序今天就说一下吧, react有三种构建组件的方法: 第一呢,就是React.createClass(),ES5写法现在用的比较少第二呢:ES6 clas ...
react常用生命周期流程图
简述本文将常用的react生命周期绘制成了一张流程图,便于理解和记忆; react中每个组件都包含"生命周期方法",我们可以重写这些方法,以便于在运行过程中特定的阶段执行这些方法 ...
react之生命周期
目录一.什么是react? 二.react的生命周期三.对于react生命周期的思考熟练使用react开发项目之后,最近在学习react的底层原理以及源码,顺便总结一下react的生命周期. 一 ...
React的生命周期（面试必问）
React的生命周期两张图带你理解 React的生命周期 React的生命周期(旧) class Life extends React.Component{// 构造器constructor(pro ...
简单认识React的生命周期
一. React的生命周期这里render渲染函数会执行两次,第一次是当组件初始化完成的时候,第二次是当组件完成从数据的修改的时候再执行一次 1.创建和初始化到的生命周期: (1) getDefau ...
React 组件生命周期
组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: componentWillMoun ...

React的生命周期

实例化

存在期