React 生命周期简介

Posted 2021-02-03 web-panpan

 

 React 中组件的生命周期会经历如下三个过程：装载过程、更新过程、卸载过程。

• 装载过程：组件实例被创建和插入 DOM 树的过程；
• 更新过程：组件被重新渲染的过程；
• 卸载过程：组件从 DOM 树中删除的过程。

注意：装载过程与卸载过程在组件的生命周期中只会执行一次，更新过程可以多次执行。

在这三个过程中，分别依次调用了组件的生命周期函数。

React 组件生命周期总体流程图如下：

一、装载过程

在这个过程中组件被创建，装载过程在组件的生命周期中只会被执行一次，调用的生命周期函数有：

• defaultProps / getDefaultProps()
• constructor() / getInitialState()
• componentWillMount()
• render()
• conponentDidMount()

1、defaultProps：

组件类的一个静态属性，严格来讲这里不属于组件的生命周期的一部分，用于设置组件 props 的默认值。

1. class Counter extends Component {
2. static defaultProps = {
3. count: 0,
4. };
5. render() {
6. return (
7. <div>当前值为：{this.props.count}</div>
8. );
9. }
10. };

在调用组件时如果未设置 props.count，这样 props.count === undefined , 其将被设置默认为 0 :

 

1. render() {
2. return <Counter /> ; // 渲染后显示为 0
3. }

如果调用组件时设置 props.count={null} , 这样渲染出来为 null :

 

1. render() {
2. return <Counter count={null} /> ; // 渲染后显示为 null
3. }

他是在执行 React 的 createElement() 时去获取并赋值给 props 的，发生在组件实例化之前。

2、constructor

constructor 是 ES6 中 class 的构造函数，组件初始化调用的，所以它在组件生命周期函数中最先执行，这里主要做下面两件事情：

• 初始化组件的 state。 它是组件初始化实例时最先执行的一个函数，因此在这里初始化 state ；
• 方法的绑定。在 ES6 语法下，类的每个成员函数在执行时的 this 指向并不是和类的实例自动绑定的， 而构造函数中，this指向就是当前组件实例，为了方便将来调用，往往在构造函数中将组件实例的函数使用 bind(this) 这种方式，让当前实例中的函数调用时，this 始终是指向当前组件实例。

 

1. class Counter extends Component {
2. // 设置默认 props 的值
3. static defaultProps = {
4. count: 0,
5. };
6. // 构造函数 construcor
7. constructor(props) {
8. super(props);
9. this.state = {
10. count: 0,
11. };
12. this.handleIncrease = this.handleIncrease.bind(this);
13. }
14. // 点击增加1
15. handleIncrease(){
16. let addCounter = this.state.counter;
18. this.setState({
19. counter: addCounter + 1
20. })
21. }
22. render() {
23. return (
24. <div>
25. 当前 props 值为：{this.props.count}
26. <br />
27. 当前 state 值为：{this.state.counter}
28. <button onClick={this.handleIncrease}>点击增加</button>
29. </div>
30. );
31. }
32. };

3、componentWillMount

准备装载组件。它在组件实例化并初始化数据完成以后，组件 render() 之前调用。

官方文档说避免在该方法中引入任何的副作用或订阅，所以我们不建议在此生命周期函数内获取数据或修改 state； 如果有需求在 render() 前一定要修改 state，最好是在 constructor 里进行。

4、render

确定需要更新组件时调用 render，根据 diff 算法，渲染界面，生成需要更新的虚拟 DOM 数据。它并不做实际的渲染动作，只是返回了一个 JSX 描述结构，最终是由 React 来操作渲染过程。

render 函数是 React 组件中最重要的函数，一个组件中可以没有其他的生命周期函数，但一定要有 render 函数，如果一个组件没有东西可呈现，这个组件的 render 函数定义返回 null 或 false;

render() 是一个纯函数，所以在此声明周期内不能 setState。

5、componentDidMount

在组件装载后调用。这时已经生成了真实的 DOM 节点。

在这个函数中我们可以获取数据，改变状态，直接改变 DOM 等操作。

注意:并不是在调用 render() 函数之后立即调用了此函数，调用 render() 函数只是返回了一个 JSX 对象供 React 调用决定如何渲染，在 React 库把所有组件渲染完成再完成装载，这时才会依次调用各个组件的 componentDidMount 函数，表示这个组件已经挂载到 DOM 上了。

以上装载过程的生命周期函数只会执行一次

二、更新过程

更新过程中依次执行的生命周期函数有：

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

并不是每次更新都会依次调用以上全部函数，会根据不同的变化依次执行相关的函数。

1、componentWillReceiveProps(nextProps)

子组件的 props 发生改变及父组件的 render 函数被调用都会触发子组件的此函数。我们可以根据 nextProps 同步本地的 state，但最好要先比较 this.props 与 nextPorps 在做操作。 
本组件中通过 this.setState 方法触发的更新不会触发此函数。

2、shouldComponentUpdate(nextProps, nextState)

当组件接收到新的 props 和 state 改变的话，都会触发调用，返回 Boolean，默认返回的是 true。 
返回 true 继续进行下面的生命周期函数；返回 false 不更新组件。 
这个组件中不允许改变 state。 
我们可以利用此特点来优化项目，避免不必要的渲染，提高性能。

 

1. shouldComponentUpdate(nextProps, nextState) {
2. return this.props.count !== nextProps.count || this.state.counter !== nextState.counter;
3. }

3、componentWillUpdate

在 shouldComponentUpdate 函数返回 true 时，会依次调用 componentWillUpdate、render 和 componentDidUpdate 函数。 
此函数内不可以改变 state，如果需要更新状态，请在 componentWillReceiveProps 中调用 this.setState()。

4、render 
这次 render() 和装载阶段的 render() 没有区别，只不过是在不同的阶段调用。

前一个 render 是在组件第一次加载时调用的，也就是初次渲染； 
后一个 render 是除去第一次之后调用的，也就是再渲染。

5、componentDidUpdate 
在组件再次渲染之后调用的。和 componentDidMount 一样，在这个函数中可以使用 this.refs 获取真实 DOM。

此函数内不可以改变 state

三、卸载阶段

componentWillUnmount

当组件要被从界面上移除的时候，就会调用。 
在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等。

代码 github 地址：https://github.com/mqp0713/react-lifestyle