• react组件的生命周期

    react组件的生命周期

    需求:定义组件实现以下功能：

    1. 让指定的文本做显示 / 隐藏的渐变动画
    2. 从完全可见，到彻底消失，耗时2S
    3. 点击“不活了”按钮从界面中卸载组件
     //1、创建组件
    class Demo extends React.Component {
        state = {opacity: 1}
        death = () => {
            //卸载组件
            ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }
        //组件完成挂载后执行
        componentDidMount() {
            this.timer=setInterval(() => {
                //    获取原状态
                let {opacity} = this.state;
                //    减小0.1
                opacity -= 0.1
                if (opacity <= 0) opacity = 1
                this.setState({opacity})
            }, 200)
        }

        //组件将要卸载时调用
        componentWillUnmount(){
            //清除定时器
            clearInterval(this.timer)
        }
        //render调用时机：初始化渲染、状态更新之后
        render() {
            return (
                
    
                    
    {opacity: this.state.opacity}}>react感觉还是有点难滴！！！怎么办？
    
                    
                
    
            )
        }
    }

    //2、渲染虚拟DOM
    ReactDOM.render(, document.getElementById('test'))

    • 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

    1、什么是生命周期？

    1. 组件从创建到死亡它会经历一些特定的阶段。
    2. React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
    3. 我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作

    2、生命周期流程图（旧）

    在这里插入图片描述

    2.1 、生命周期的三个阶段（旧）

    1. 初始化阶段: 由ReactDOM.render()触发—初次渲染
      1. constructor()
      2. componentWillMount()
      3. render()
      4. componentDidMount()---------常用，一般在这个钩子函数做一些初始化操作，例如：开启定时器，发起网络请求，订阅消息等等…
    2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
      1. shouldComponentUpdate()
      2. componentWillUpdate()
      3. render()--------必须使用的一个
      4. componentDidUpdate()
    3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
      1. componentWillUnmount()--------常用，一般在这个钩子函数做一些收尾的事儿，例如：关闭定时器、取消定时器…
     //1、创建组件
    class Count extends React.Component {
        //构造器
        constructor(props) {
            console.log('count-constructor');
            super(props);
            this.state = {count: 0}
        }

        //将要挂载
        componentWillMount() {
            console.log('count-componentWillMount');
        }

        //挂载后
        componentDidMount() {
            console.log('count-componentDidMount');
        }

        //将要卸载
        componentWillUnmount() {
            //清除定时器
            console.log('count-componentWillUnmount');
        }

        //控制组件是否更新的”阀门“
        shouldComponentUpdate() {
            console.log('count-shouldComponentUpdate');
            return true;//返回false状态无法更新,返回值为true，则更新
        }

        //组件将要更新
        componentWillUpdate() {
            console.log('count-componentWillUpdate');
        }

        //组件更新完成
        componentDidUpdate() {
            console.log('count-componentDidUpdate');
        }

        //count+1
        add = () => {
            //    获取原状态
            let {count} = this.state;
            this.setState({
                count: count + 1
            })
        }
        //卸载组件
        unmount = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }
        //强制更新
        force = () => {
            //强制更新(无  控制组件是否更新的‘阀门’的步骤)
            this.forceUpdate();
        }

        render() {
            console.log('count-render');
            let {count} = this.state;
            return (
                
    
                    
    当前求和为:{count}
    
                    
                    
                    
                
    
            )
        }
    }

    //父组件
    class Father extends React.Component {
        state = {carName: '宝马'}
        changeCar = () => {
            this.setState({
                carName: '马自达'
            })
        }

        render() {
            return (
    
                    
    Father
    
                    
                    
                
    
            )
        }
    }

    //子组件
    class Child extends React.Component {
        //组件将要接收父组件传过来的新的属性值（第一次不会执行）
        componentWillReceiveProps(props) {
            console.log('Child-componentWillReceiveProps',props);
        }

        render() {
            return (
    我是Child组件，我从Father组件中接收到的车是：{this.props.carName}
    )
        }
    }

    //2、渲染虚拟DOM
    // ReactDOM.render(, document.getElementById('test'))
    ReactDOM.render(, document.getElementById('test'))

    • 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
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107

    3、生命周期流程图（新）

    在这里插入图片描述

    3.1、被弃用的三个钩子函数

      1. componentWillMount
      1. componentWillReceiveProps
      1. componentWillUpdate

      现在使用会出现警告，需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

    3.2、生命周期的三个阶段（新）

    1. 初始化阶段: 由ReactDOM.render()触发—初次渲染
      1. constructor()
      2. getDerivedStateFromProps
      3. render()
      4. componentDidMount()---------常用，一般在这个钩子函数做一些初始化操作，例如：开启定时器，发起网络请求，订阅消息等等…
    2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
      1. getDerivedStateFromProps
      2. shouldComponentUpdate()
      3. render()
      4. getSnapshotBeforeUpdate
      5. componentDidUpdate()
    3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
      1. componentWillUnmount()--------常用，一般在这个钩子函数做一些收尾的事儿，例如：关闭定时器、取消定时器…
        //1、创建组件
    class Count extends React.Component {
        //构造器
        constructor(props) {
            console.log('count-constructor');
            super(props);
            this.state = {count: 0}
        }

        // 若state的值在任何时候都取决于props，可以使用
        //派生状态（state的值在任何时候都取决于props.派生状态会导致代码冗余，并使组件难以维护）
        static getDerivedStateFromProps(props, state) {
            //必须有返回值，null或state obj状态对象
            console.log('count-getDerivedStateFromProps', props, state);
            return null;
            // return props;//返回状态对象会影响状态的更新
        }

        getSnapshotBeforeUpdate(prevProps, prevState) {
            console.log('count-getSnapshotBeforeUpdate', prevProps, prevState);
            return 'xiao';
        }
        //挂载后
        componentDidMount() {
            console.log('count-componentDidMount');
        }

        //将要卸载
        componentWillUnmount() {
            //清除定时器
            console.log('count-componentWillUnmount');
        }

        //控制组件是否更新的”阀门“
        shouldComponentUpdate() {
            console.log('count-shouldComponentUpdate');
            return true;//返回false状态无法更新,返回值为true，则更新
        }

        //组件更新完成(第三个参数为getSnapshotBeforeUpdate钩子函数的返回值)
        componentDidUpdate(prevProps, prevState,snapshotValue) {
            console.log('count-componentDidUpdate',prevProps, prevState,snapshotValue);
        }

        //count+1
        add = () => {
            //    获取原状态
            let {count} = this.state;
            this.setState({
                count: count + 1
            })
        }
        //卸载组件
        unmount = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }

        render() {
            console.log('count-render');
            let {count} = this.state;
            return (
                
    
                    
    当前求和为:{count}
    
                    
                    
                
    
            )
        }
    }

    //2、渲染虚拟DOM
    ReactDOM.render(, document.getElementById('test'))

    • 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
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72

    getSnapshotBeforeUpdate的应用场景：

      以特殊方式处理滚动位置

     //1、创建组件
    class NewsList extends React.Component {
        state = {newsArr: []}

        componentDidMount() {
            setInterval(() => {
                //    获取原来的状态值
                const {newsArr} = this.state;
                //    模拟一条新闻
                const news = '新闻' + (newsArr.length + 1);
                //    更新状态
                this.setState({
                    newsArr: [news, ...newsArr]
                })
            }, 1000)
        }

        getSnapshotBeforeUpdate() {
            return this.refs.list.scrollHeight
        }

        componentDidUpdate(prevProps, prevState, snapshotValue) {
            this.refs.list.scrollTop += this.refs.list.scrollHeight - snapshotValue;
        }

        render() {
            return (
                
    
                    {this.state.newsArr.map((item, index) => {
                        return 
    {item}
    
                    })}
                
    
            )
        }
    }

    ReactDOM.render(, document.getElementById('test'))


    • 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

    在这里插入图片描述
    不断产生新的数据，滚动条的高度不断变小，但是显示的内容不会随新产生的数据而滚动

  • 相关阅读:
    学信息系统项目管理师第4版系列23_成本管理
    asp毕业设计——基于asp+access的在线人才招聘网设计与实现（毕业论文+程序源码）——人才招聘网
    Java开发：Java SE 基础知识篇
    .NET 的 Native AOT 现在是什么样的？
    .NetCore Web Api 利用ActionFilterAttribute统一接口返回值格式
    MeterSphere 监控方案
    【Leetcode】1776. Car Fleet II
    java-php-net-python-商务安全邮箱计算机毕业设计程序
    法院对职业放贷人的认定标准
    【LeetCode】16. RansomNode·赎金信
  • 原文地址：https://blog.csdn.net/fangqi20170515/article/details/126052535