# 一、React v16.0前的生命周期

# 1.1 第一个是组件初始化(initialization)阶段
也就是以下代码中类的构造方法(
constructor()),Test类继承了reactComponent这个基类,也就继承这个react的基类,才能有render(),生命周期等方法可以使用,这也说明为什么函数组件不能使用这些方法的原因
super(props)用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件,功子组件读取(组件中props只读不可变,state可变)而constructor()用来做一些组件的初始化工作,如定义this.state的初始内容
import React, { Component } from 'react';
class Test extends Component {
constructor(props) {
super(props);
}
}
# 1.2 第二个是组件的挂载(Mounting)阶段
此阶段分为componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate
# 1.2.1 componentWillMount
在组件挂载到DOM前调用,且只会被调用一次,在这边调用
this.setState不会引起组件重新渲染,也可以把写在这边的内容提前到constructor()中,所以项目中很少用
# 1.2.2 render
根据组件的
props和state(无两者的重传递和重赋值,论值是否有变化,都可以引起组件重新render) ,return一个React元素(描述组件,即UI),不负责组件实际渲染工作,之后由React自身根据此元素去渲染出页面DOM。render是纯函数(Pure function:函数的返回结果只依赖于它的参数;函数执行过程里面没有副作用),不能在里面执行this.setState,会有改变组件状态的副作用
# 1.2.3 componentDidMount
组件挂载到
DOM后调用,且只会被调用一次
# 1.3 第三个是组件的更新(update)阶段
setState引起的state更新或父组件重新render引起的props更新,更新后的state和props相对之前无论是否有变化,都将引起子组件的重新render
# 1.3.1 造成组件更新有两类(三种)情况
1. 父组件重新render
父组件重新
render引起子组件重新render的情况有两种
- a. 直接使用,每当父组件重新
render导致的重传props,子组件将直接跟着重新渲染,无论props是否有变化。可通过shouldComponentUpdate方法优化
class Child extends Component {
shouldComponentUpdate(nextProps){ // 应该使用这个方法,否则无论props是否有变化都将会导致组件跟着重新渲染
if(nextProps.someThings === this.props.someThings){
return false
}
}
render() {
return