React 生命周期管理
问题
React 16.X的生命周期,以及为何要替换掉以前的?
你有没有遇到过这样的问题:
- 组件的生命周期有哪些?为什么要有生命周期函数?
- 我应该什么时候去获取后台数据? 为什么很多教程都推荐用componentDidMount? 用componentWillMount会有什么问题?
- 为什么setState写在这里造成了重复渲染多次?
- setState在这里写合适吗?
Update: 更新为React16版本,React16由于异步渲染等特性会让之前的一些方法如componentWillMount变得不够安全高效逐步废弃,详见Legacy Methods
生命周期
如果你做过安卓开发方面的编程,那么你应该了解onCreate,onResume,onDestrory等常见生命周期方法,生命周期函数说白了就是让我们在一个组件的各个阶段都提供一些钩子函数来让开发者在合适的时间点可以介入并进行一些操作,比如初始化(onCreate)的时候我们应该初始化组件相关的状态和变量,组件要销毁(onDestrory)时。
React 16组件的生命周期分为三个部分: 装载期间(Mounting)
,更新期间(Updating)
和卸载期间(Unmounting)
,React16多出来一个componentDidCatch() 函数用于捕捉错误。
详细的生命周期函数解释可以看官方文档 React.Component。
装载期间
组件被实例化并挂载在到DOM树这一过程称为装载,在装载期调用的生命周期函数依次为
上图中还有一些函数比如getDefaultProps
, getInitialState
等是在你不是用ES6的class创建组件而是用createReactClass
函数创建函数时暴露的方法,分别用于定义属性和设置初始状态,详见React-without-es6,这里我们不再赘述。
constructor(props)
构造函数,和java class的构造函数一样,用于初始化这个组件的一些状态和操作,如果你是通过继承React.Component
子类来创建React的组件的,那么你应当首先调用super(props)
初始化父类。