组件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
组件更新完成