React生命周期总结

生命周期(新)

先看图

生命周期(新)

对比 (旧)生命周期

对比俩张图发现,旧版的废弃了三个”will”,引来了俩个”get”

废弃:

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

新增:

  • getDerivedStateFromProps
  • getSnapshotbeforeUpdate

getDerivedStateFromProps

  1. 是个静态方法,需要在前面加个static,否则会报错,如下:

Lifecycle method should be static: getDerivedStateFromProps

  1. 必须返回属性对象或者 null,否则报错,如下:

A valid state object (or null) must be returned. You have returned undefined.

  1. 可以传参数
    参数:新的属性对象(内部数据state),旧的状态对象(外部数据props)

官网也提出了,这个钩子不建议使用, 因为 派生状态会导致代码冗余,并使组件难以维护。在这里不过多学习它了。

getDerivedStateFromProps

在更新之前获取快照

  1. 有这个钩子必须也要有 componentDidUpdate 这个钩子,需要和它搭配使用
  2. 必须有返回值,返回值 可以是 值,也可以是null
1
2
3
4
5
6
7
8
9
10
11
12
13

getSnapshotBeforeUpdate(){
console.log('getSnapshotBeforeUpdate--count')
return 'Wangpf'
}


componentDidUpdate(preProps, preState, snapShotValue){
console.log('componentDidUpdate--count组件更新完毕后', preProps, preState, snapShotValue);
// preProps 外部数据更新前的值
// preState 内部数据更新前的值
// snapShotValue 是在getDerivedStateFromProps钩子函数中所返回的值
}

getSnapshotBeforeUpdate

获取更新前的快照值,

举个例子:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import React, { Component } from 'react';

import './News.css';

class News extends Component {
state = {
newsArr: [],
};

componentDidMount() {
setInterval(() => {
const { newsArr } = this.state;
const news = `新闻${newsArr.length + 1}`;

this.setState({
newsArr: [news, ...newsArr],
});
}, 1000);
}

getSnapshotBeforeUpdate() {
return this.listHeight.scrollHeight;
}

componentDidUpdate(preProps, preState, height) {
// 用更新之后的高度 减去 更新之前的高度 再 += 给 更新之后的所在的值
// 这样旧能一直处于最底下了
this.listHeight.scrollTop += this.listHeight.scrollHeight - height;
}

render() {
const { newsArr } = this.state;
return (
<div className='list' ref={(c) => (this.listHeight = c)}>
{newsArr.map((item, index) => {
return (
<div key={index} className='news'>
{item}
</div>
);
})}
</div>
);
}
}

export default News;

上述例子描述的是 , 可以使用 该钩子来获取更新之前的 scroll 高度, 然后到它一直在滚动时,我希望它一直显示某个位置,而不是随之滚动,一直显示顶部。

总结

记住较为重要的几个钩子

  1. render : 初始化渲染或者更新渲染时调用的
  2. componentDidMount:组件挂载完毕后调用,用途如: 开启监听,发送 ajax 请求
  3. componentWillUnmount: 组件将要卸载时调用, 用途如: 做一些收尾的工作,如清理定时器,取消订阅等。

废弃的钩子

  1. componentWillMount
  2. componentWillReceiveProps
  3. componentWillUpdate

目前版本 17.0.1,目前使用的话,会出现警告,需要加上 前缀 UNSAFE_ 才行, 但官方说了在未来 18 版本之后很可能彻底废弃,因此不建议使用。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!