晨曦的博客

技术博客

0%

十二、React 生命周期函数

发表于 更新于 分类于 ，

详情请点阅读全文

React生命周期函数：

【官方文档】：https://reactjs.org/docs/react-component.html
【定义】组件加载之前，组件加载完成，以及组件更新数据，组件销毁。 触发的一系列的方法 ，这就是组件的生命周期函数

一、组件加载的时候触发的函数：

constructor 、componentWillMount、 render 、componentDidMount

组件加载触发函数实例

【Lifecycle.js】

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
import React, { Component } from 'react';

class Lifecycle extends Component {
    //【01】组件加载时第一个触发的函数
    constructor(props){
        console.log('01构造函数');

        super(props);       
        this.state={
          title:'生命同期示例组件'
        }
    }

    //【02】组件将要挂载的时候触发的生命周期函数
    componentWillMount(){
        console.log('02组件将要挂载');
    }

    //【04】组件挂载完成的时候触发的生命周期函数
    componentDidMount(){
        //dom操作放在这个里面    
        //【请求数据也放在这个里面】：（防止页面没渲染完成数据出错）
        console.log('04组件将要挂载');
    }

    //【03】组件渲染时触发的生命同期函数
    render() {
        console.log('03数据渲染render');
      return (
        <div>
            <h1>生命同期函数：加载时触发的函数</h1>
            <br/><hr/>

        </div>
      );
    }
  }
  export default Lifecycle;

【Home.js】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from 'react';
import Lifecycle from './Lifecycle';

class Home extends Component {
    constructor(props){
        super(props);
        this.state={
          title:'生命同期函数示例'
        }
    }

    render() {
      return (
        <div>
            <Lifecycle />
        </div>
      );
    }
  }
  export default Home;

【App.js】

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';
import './App.css';
import Home from './components/Home.js';

function App() {
  return (
    <div className="App">  
        <Home />
        <hr/>      
    </div>
  );
}
export default App;

【结果】刷新页面，函数将逐个被加载（警告部分不用管它）
在这里插入图片描述

二、组件数据更新的时候触发的生命周期函数：

shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate

【Lifecycle.js】

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
48
49
import React, { Component } from 'react';

class Lifecycle extends Component {
    constructor(props){
        super(props);       
        this.state={
          title:'生命同期示例组件',
          msg:'没更新数据之前消息'
        }
    }

    //【01】是否要更新数据  返回true才会执行更新数据的操作
    shouldComponentUpdate(nextProps, nextState){
      console.log('01是否要更新数据');
      console.log(nextProps);
      console.log(nextState);
      return true;
  }

  //【02】将要更新数据的时候触发
  componentWillUpdate(){
      console.log('02组件将要更新');
  }
  //【04】组件更新完成
  componentDidUpdate(){
      console.log('04组件数据更新完成');
  }


  setMsg=()=>{
    this.setState({
        msg:'我是改变后的msg的数据'
    })
  }

	//【03】更新数据第3步，渲染
    render() {
        console.log('03数据渲染render');
      return (
        <div>
            <h1>生命同期函数：更新数据时触发的函数</h1>
            <h2>{this.state.msg}</h2>
            <button onClick={this.setMsg}>更新state数据</button>
            <br/><hr/>
        </div>
      );
    }
  }
  export default Lifecycle;

【Home.js】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from 'react';
import Lifecycle from './Lifecycle';

class Home extends Component {
    constructor(props){
        super(props);
        this.state={
          title:'生命同期函数示例'
        }
    }

    render() {
      return (
        <div>
            <Lifecycle />
        </div>
      );
    }
  }
  export default Home;

【App.js】

1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import './App.css';
import Home from './components/Home.js';

function App() {
  return (
    <div className="App">  
        <Home />        
    </div>
  );
}
export default App;

【结果】点按键后，按顺序进行数据更新：
在这里插入图片描述
【注】console其中第2、3条数据来自[Lifecycle.js]的【console.log(nextProps); console.log(nextState);】
将在下一主题讲到：三、

三、你在父组件里面改变props传值的时候触发的：

componentWillReceiveProps

【Lifecycle.js】

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
import React, { Component } from 'react';

class Lifecycle extends Component {
    constructor(props){
        super(props);       
        this.state={
          title:'生命同期示例组件',
          msg:'没更新数据之前消息'
        }
    }

  // 【00】你在父组件里面改变props传值的时候触发的
  componentWillReceiveProps(){
    console.log('00父子组件传值，父组件里面改变了props的值触发的方法')
  }

    //【01】是否要更新数据  返回true才会执行更新数据的操作
    //【向子组件传值触发的同期函数重点部分】
    shouldComponentUpdate(nextProps, nextState){
      console.log('01是否要更新数据');
      console.log(nextProps);
      console.log(nextState);
      return true;
  }

  //【02】将要更新数据的时候触发
  componentWillUpdate(){
      console.log('02组件将要更新');
  }
  //【04】组件更新完成
  componentDidUpdate(){
      console.log('04组件数据更新完成');
  }

    render() {
        console.log('03数据渲染render');
      return (
        <div>
            {/* 获取父组件传值，随后父组件title将发生改变，触发此页面函数 */}
            <h3>{this.props.title}</h3>
            <br/><hr/>
        </div>
      );
    }
  }
  export default Lifecycle;

【Home.js】

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
import React, { Component } from 'react';
import Lifecycle from './Lifecycle';
import { thisTypeAnnotation } from '@babel/types';

class Home extends Component {
    constructor(props){
        super(props);
        this.state={
          title:'父组件标题：生命同期函数示例',
          flag:true
        }
    }

    changtitle=()=>{
        this.setState({
            title:'改变后的父组件标题'
        })
    }

    render() {
      return (
        <div>
            <h1>生命周期函数：向子组件传值</h1>
            {
            //后面的title=xxx为向子组件传值
            }
                <Lifecycle title={this.state.title} />  
                <button onClick={this.changtitle}>改变state要传给子组件的值</button>          

        </div>
      );
    }
  }
  export default Home;

【App.js】

1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import './App.css';
import Home from './components/Home.js';

function App() {
  return (
    <div className="App">  
        <Home />        
    </div>
  );
}
export default App;

【结果】：
在这里插入图片描述
点改变之后：
在这里插入图片描述

四、组件销毁的时候触发的：

componentWillUnmount

【应用场景】：比如编写文件时，放弃保存，就要销毁那个页面的组件；

【Lifecycle.js】

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
import React, { Component } from 'react';

class Lifecycle extends Component {
    constructor(props){
        super(props);       
        this.state={
          title:'生命同期示例组件',
          msg:'没更新数据之前消息'
        }
    }

   //组件销毁的时候触发的生命周期函数   用在组件销毁的时候执行操作
   //销毁哪个组件，销毁周期函数就要写在哪个组件里
   componentWillUnmount(){
    console.log('组件已销毁');
}

//自写函数
  setMsg=()=>{
    this.setState({
        msg:'我是改变后的msg的数据'
    })
  }

    render() {
        console.log('03数据渲染render');
      return (
        <div>
            <h2>{this.state.msg}</h2>
            <button onClick={this.setMsg}>更新state数据</button>
            <br/><hr/>
        </div>
      );
    }
  }
  export default Lifecycle;

【Home.js】

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
import React, { Component } from 'react';
import Lifecycle from './Lifecycle';

class Home extends Component {
    constructor(props){
        super(props);
        this.state={
          title:'生命同期函数示例',
          flag:true
        }
    }

    // 设置flag用于确定是否销毁组件
    setFlag=()=>{
        this.setState({
            flag:!this.state.flag
        })
    }

    render() {
      return (
        <div>
            <h1>销毁组件生命周期函数示例</h1>
            
            { //【是否销毁子组件重点代码】：如果flag=true加载<Lifecycle />组件，否则加载空；
                this.state.flag?<Lifecycle />:""
            }
            
            <br/>
            <button onClick={this.setFlag}>销毁/加载子组件</button>

        </div>
      );
    }
  }
  export default Home;

【App.js】

1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import './App.css';
import Home from './components/Home.js';

function App() {
  return (
    <div className="App">  
        <Home />        
    </div>
  );
}
export default App;

【结果】：
在这里插入图片描述
【点销毁后】：
在这里插入图片描述

五、【总结】必须记住的生命周期函数：

*加载的时候：componentWillMount、 render 、componentDidMount（dom操作要放此处）

更新的时候：componentWillUpdate、render、componentDidUpdate

*销毁的时候： componentWillUnmount