组件Initialization 初始化阶段
类的构造方法（constructor()），继承了react Component基类，也继承react基类，才能有render()，生命周期
注意：函数式组件没有生命周期，也没有state
super(props)将父组件的props传递给子组件，让子组件读取
constructor() 初始化组件的状态，如定义this.state的内容
组件Mounting 挂载阶段
componentWillMount（17正式删除）
- 在组件挂载到DOM前调用，且只调用一次，调用this.setState不会引起组件的重新渲染
render
根据组件的state和props,return一个react元素，由React自身根据此元素去渲染出页面DOM。
是纯函数，不能在里面执行this.setState
若state和props发生变化，会重新调用render
componentDidMount
- 组件挂载到DOM后调用，且只调用一次
组件Updation 更新阶段
setState引起的state更新或父组件重新render引起的props更新，更新后的state和props都将引起子组件的重新render。
造成组件更新有以下情况：
- 父组件重新render
父组件的重新render导致重传的props，子组件将直接跟着重新渲染，无论props是否有变化，可通过shouldComponentUpdate方法优化
1
2
3
4
5
6
7
8
9
10
11
12
13class Child extends Component {
shouldComponentUpdate(nextProps) {
if (nextProps.someThings === this.props.someThings) { // 当重新渲染前后值没发生改变，则子组件不要重新渲染
return false
}
}
render() {
return (
<div>{this.props.someThings}</div>
)
}
}在componentWillReceiveProps,将props换成state
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18class Child extends Component {
constructor(props) {
super(props);
this.state = {
someThings: props.someThings
}
}
componentWillReceiveProps(nextProps) {// 父组件重传props就会调用这个方法, props会判断是否发生变化，变化才会重新setState
this.setState({someThings: nextProps.someThings})
}
render() {
return (
<div>{this.props.someThings}</div>
)
}
} - 组件本身调用setState，无论state有没有变化，也可通过shouldComponentUpdate方法优化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27class Child extends Component {
constructor(props) {
super(props);
this.state = {
someThings: 1
}
}
shouldComponentUpdate(nextState) {// 当state真的发生变化才重新渲染
if (nextStatee.someThings === this.state.someThings) {
return false
}
}
handleClick = () => {
const preSomeThings = this.state.someThings;
this.setState({
someThings: preSomeThings
})
}
render() {
return (
<div onClick={this.handleClick}>{this.state.someThing}</div>
)
}
}
componentWillReceiveProps(17正式删除)
子组件接收到父组件传递来的参数，父组件render函数重新被执行时执行
- 子组件接收到父组件传递过来的参数，父组件render函数重新被执行，这个生命周期就会被执行
- 组件第一次存在于DOM，函数不会被执行，如果已经存在于DOM，函数才会被执行
（新增）getDerivedStateFromProps(nextProps, prevState)
在组件创建时和更新时的render方法之前调用，它应该返回一个对象来更新状态，或者返回null来不更新任何内容。
在声明之前要加static关键字，无法访问class的this
shouldComponentUpdate(nextProps, nextState)
通过对比props和state是否真的发生变化，返回true则当前组件将继续执行更新过程，返回false则当前组件停止更新
componentWillUpdate(17正式删除)
组件即将更新
render
挂载渲染
（新增）getSnapshotBeforeUpdate(prevProps, prevState)
render之后执行，执行时DOM元素还没被更新，用来获取DOM信息，获得snapshot作为componentDidUpdate的第三个参数传入，此声明周期返回的任何值都被作为参数传递给componentDidUpdate()
componentDidUpdate
组件更新完成
