1. 首页
  2. 文章中心
  3. React

react生命周期的三个过程是什么

201 阅读 0 评论
我是靠谱客的博主 激昂大米，这篇文章主要介绍react生命周期的三个过程是什么，现在分享给大家，希望可以做个参考。

本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。

react生命周期的三个过程是什么

React的生命周期从广义上分为三个阶段：挂载、渲染、卸载

从出生到成长，最后到死亡，这个过程的时间可以理解为生命周期。React的生命周期同理也是这么一个过程。

React的生命周期分为三个阶段：挂载期（也叫实例化期）、更新期（也叫存在期）、卸载期（也叫销毁期）。在每个周期中React都提供了一些钩子函数。

生命周期的描述如下：

  • 挂载期：一个组件实例初次北创建的过程。

  • 更新期：组件在创建后再次渲染的过程。

  • 卸载期：组件在使用完后被销毁的过程。

组件的挂载：

组件在首次创建后，进行第一次的渲染为挂载期。挂载期有的一些方法会被依次触发，列举如下：

  • constructor(构造函数，初始化状态值)
  • getInitialState(设置状态机)
  • getDefaultProps(获取默认的props)
  • UNSAFE_componentWillMount(首次渲染前执行)
  • render(渲染组件)
  • componentDidMount(render渲染之后执行的操作)
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//组件挂载import React from 'react';import ReactDOM from 'react-dom';class HelloWorld extends React.Component{
    constructor(props) {
        super(props);
        console.log("1,构造函数");
        this.state={};
        console.log("2,设置状态机");
    }
    static defaultProps={
        name:"React",
    }
    UNSAFE_componentWillMount(nextProps, nextState, nextContext) {
        console.log("3,完成首次渲染前调用");
    }
    render() {
        console.log("4,组件进行渲染");
        return (
            <p>
                <p>{this.props.name}</p>
            </p>
        )
    }
    componentDidMount() {
        console.log("5,componentDidMount render渲染后的操作")
    }}ReactDOM.render(<HelloWorld />, document.getElementById('root'));
登录后复制

在这里插入图片描述

组件的更新：
组件更新，指的是在组件初次渲染后，进行了组件状态的改变。React在生命周期中的更新过程包括以下几个方法：

  • UNSAFE_componentWillReceiveProps :当父组件更新子组件state时，该方法会被调用。
  • shouldComponentUpdate ： 该方法决定组件state或props的改变是否需要重新渲染组件。
  • UNSAFE_componentWillUpdate : 在组件接受新的state或者props时，即将进行重新渲染前调用该方法，和UNSAFE_componentWillMount方法类似。
  • componentDidUpdate : 在组件重新渲染后调用该方法，和componentDidMount方法类似。
复制代码
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
50
51
52
53
//组件更新class HelloWorldFather extends React.Component{
    constructor(props) {
        super(props);
        this.updateChildProps=this.updateChildProps.bind(this);
        this.state={  //初始化父组件
            name:"React"
        }
    }
    updateChildProps(){  //更新父组件state
        this.setState({
            name:"Vue"
        })
    }
    render() {
        return (
            <p>
                <HelloWorld name={this.state.name} />  {/*父组件的state传递给子组件*/}
                <button onClick={this.updateChildProps}>更新子组件props</button>
            </p>
        )
    }}class HelloWorld extends React.Component{
    constructor(props) {
        super(props);
        console.log("1,构造函数");
        console.log("2,设置状态机")
    }
    UNSAFE_componentWillMount() {
        console.log("3,完成首次渲染前调用");
    }
    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
        console.log("6,父组件更新子组件时调用该方法");
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log("7,决定组件props或者state的改变是否需要重新进行渲染");
        return true;
    }
    UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
        console.log("8,当接收到新的props或state时，调用该方法");
    }
    render() {
        console.log("4,组件进行渲染");
        return (
            <p>
                <p>{this.props.name}</p>
            </p>
        )
    }
    componentDidMount() {
        console.log("5,componentDidMount render后的操作");
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("9,组件被重新选然后调用该方法");
    }}ReactDOM.render(<HelloWorldFather />,document.getElementById("root"));
登录后复制

在这里插入图片描述
点击“更新子组件props”后：
在这里插入图片描述

组件的卸载：
生命周期的最后一个过程为组件卸载期，也称为组件销毁期。该过程主要涉及一个 方法，即componentWillUnmount，当组件从DOM树删除的时候调用该方法。

复制代码
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
50
51
52
53
54
55
56
57
58
59
60
//组件卸载class HelloWorldFather extends React.Component{
    constructor(props) {
        super(props);
        this.updateChildProps=this.updateChildProps.bind(this);
        this.state={  //初始化父组件
            name:"React"
        }
    }
    updateChildProps(){  //更新父组件state
        this.setState({
            name:"Vue"
        })
    }
    render() {
        return (
            <p>
                <HelloWorld name={this.state.name} />  {/*父组件的state传递给子组件*/}
                <button onClick={this.updateChildProps}>更新子组件props</button>
            </p>
        )
    }}class HelloWorld extends React.Component{
    constructor(props) {
        super(props);
        console.log("1,构造函数");
        console.log("2,设置状态机")
    }
    UNSAFE_componentWillMount() {
        console.log("3,完成首次渲染前调用");
    }
    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
        console.log("6,父组件更新子组件时调用该方法");
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log("7,决定组件props或者state的改变是否需要重新进行渲染");
        return true;
    }
    UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
        console.log("8,当接收到新的props或state时，调用该方法");
    }
    delComponent(){  //添加卸载方法
        ReactDOM.unmountComponentAtNode(document.getElementById("root"));
    }
    render() {
        console.log("4,组件进行渲染");
        return (
            <p>
                <p>{this.props.name}</p>
                <button onClick={this.delComponent}>卸载组件</button>  {/*声明卸载按钮*/}
            </p>
        )
    }
    componentDidMount() {
        console.log("5,componentDidMount render后的操作");
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("9,组件被重新选然后调用该方法");
    }
    componentWillUnmount() {  //组件卸载后执行
        console.log("10,组件已被卸载");
    }}ReactDOM.render(<HelloWorldFather />,document.getElementById("root"));
登录后复制

在这里插入图片描述
点击卸载按钮后：
在这里插入图片描述

总览组件生命周期：
在这里插入图片描述

【相关推荐：javascript视频教程、web前端】

以上就是react生命周期的三个过程是什么的详细内容，更多请关注靠谱客其它相关文章！

最后

以上就是激昂大米最近收集整理的关于react生命周期的三个过程是什么的全部内容，更多相关react生命周期内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(133)

相关文章

react前端路由和后端路由的区别是什么
react前端路由和后端路由的区别是什么
vue和react的数据流有什么区别
vue和react的数据流有什么区别
nodejs中lts是什么意思
nodejs中lts是什么意思
react高阶函数的定义是什么
react高阶函数的定义是什么
react生命周期的三个过程是什么
react生命周期的三个过程是什么
nodejs的路由是什么
nodejs的路由是什么
react非受控组件是什么意思
react非受控组件是什么意思
react中map方法怎么用
react中map方法怎么用

评论列表共有 0 条评论

立即
投稿
返回
顶部