React 之 组件生命周期

理解
1) 组件对象从创建到死亡它会经历特定的生命周期阶段
2) React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
3) 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作

生命周期详述
1) 组件的三个生命周期状态:
* Mount：插入真实 DOM
* Update：被重新渲染
* Unmount：被移出真实 DOM
2) React 为每个状态都提供了勾子(hook)函数
* componentWillMount()
* componentDidMount()
* componentWillUpdate()
* componentDidUpdate()
* componentWillUnmount()
3) 生命周期流程:
a. 第一次初始化渲染显示: ReactDOM.render()
* constructor(): 创建对象初始化state
* componentWillMount() : 将要插入回调
* render() : 用于插入虚拟DOM回调
* componentDidMount() : 已经插入回调
b. 每次更新state: this.setSate()
* componentWillUpdate() : 将要更新回调
* render() : 更新(重新渲染)
* componentDidUpdate() : 已经更新回调
c. 移除组件: ReactDOM.unmountComponentAtNode(containerDom)
* componentWillUnmount() : 组件将要被移除回调

重要的勾子
1) render(): 初始化渲染或更新渲染调用
2) componentDidMount(): 开启监听, 发送ajax请求
3) componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
4) componentWillReceiveProps(): 该方法当props发生变化时执行

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript" src="../js/react.development.js"></script>

    <script type="text/javascript" src="../js/react-dom.development.js"></script>

    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/javascript" src="../js/babel.min.js"></script>

</head>

<body>

<div id="example"></div>

<script type="text/babel">

    /*

    需求: 自定义组件

        1. 让指定的文本做显示/隐藏的动画

        2. 切换时间为2S

        3. 点击按钮从界面中移除组件界面

    */

    class Life extends React.Component{

        constructor(props){

            super(props)

            //初始化状态

            this.state={

                opacity: 1

            }

            this.distroyComponent = this.distroyComponent.bind(this)

        }

        distroyComponent(){

            ReactDOM.unmountComponentAtNode(document.getElementById('example'))

        }  

        componentDidMount(){// 在此方法中启动定时器/绑定监听/发送ajax请求

            //循环定时器

            this.intervalId = setInterval(function(){ //setInterval的this 是windows

                console.log('定时器执行。。。')

                let {opacity} = this.state

                opacity -= 0.1

                if(opacity<=0){

                    opacity=1

                }

                this.setState({opacity})

            }.bind(this),200)

        }

        componentWillUnmount(){// 清除定时器/解除监听

            console.log('componentWillUnmount(): 将要被移除')

            clearInterval(this.intervalId)

        }

        render(){

            const {opacity} = this.state

            return (

                <div>

                    <h2 style={{opacity}}>{this.props.msg}</h2>

                    <button onClick={this.distroyComponent}>不活了</button>

                </div>

            )

        }

    }

     //渲染应用组件标签

     ReactDOM.render(<Life msg="React 太难了！"/>,document.getElementById('example'))

</script>

</body>

</html>

React 之 组件生命周期的更多相关文章

  1. [React] 多组件生命周期转换关系

    前段时间一直在基于React做开发,最近得空做一些总结,防止以后踩坑. 言归正传,React生命周期是React组件运行的基础,本文主要是归纳多组件平行.嵌套时,生命周期转换关系. 生命周期 Reac ...

  2. [深入React] 7.组件生命周期

    生命周期一共分三段:初始化,运行中,销毁.按照顺序: 初始化 getDefaultProps():Object 全局只会调用一次,为当前类生成的默认props,会被父组件传入的同名props覆盖. g ...

  3. React Class组件生命周期

    一.react组件的两种定义方式 1.函数组件,简单的函数组件像下面这样,接收Props,渲染DOM,而不关注其他逻辑 function Welcome(props) { return <h1& ...

  4. react之组件生命周期

    四个阶段 初始化 运行中 销毁 错误处理(16.3以后) 初始化 constructor static getDerivedStateFromProps() componentWillMount() ...

  5. 【JAVASCRIPT】React学习-组件生命周期

    摘要 整理组件加载过程,详细见官方文档:https://facebook.github.io/react/docs/react-component.html mount 过程 1)constructo ...

  6. 【React】组件生命周期

    初始化阶段 getDefaultPropos:只调用一次,实力之间共享引用 getInitialState:初始化每个实例特有的状态 componentWillMount:render之前最后一次修改 ...

  7. React.js 小书 Lesson20 - 更新阶段的组件生命周期

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...

  8. React组件生命周期小结

    React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...

  9. react学习（6）——关于组件生命周期的问题

    在项目开发的过程中,遇到了一个问题: 父组件请求后台数据,收到后将数据以props传给子组件,子组件根据收到数据的不同,显示不同的内容,同时,子组件自身可以根据click操作改变根据父组件的数据显示的 ...

随机推荐

  1. 国内操作系统OS分析（上）

    国内操作系统OS分析(上) 一．操作系统(OS)概述 操作系统(OS,Operating System),是管理.控制计算机软硬件资源的计算机程序,并为用户提供一个与系统交互的操作界面.OS是配置在计 ...

  2. Single Shot Multibox Detection (SSD)实战（上）

    Single Shot Multibox Detection (SSD)实战(上) 介绍了边界框.锚框.多尺度对象检测和数据集.现在,我们将利用这些背景知识构建一个目标检测模型:单次多盒检测(SSD) ...

  3. ffmpeg architecture（下）

    ffmpeg architecture(下) 第3章-转码 TLDR:给我看代码和执行. $ make run_transcoding 我们将跳过一些细节,但是请放心:源代码可在github上找到. ...

  4. 使用adb命令查看APP包名 和 包入口方法

    方法一: 1.查看 前台应用 包名,使用此命令注意:手机只启动要查看包名的app adb shell dumpsys activity | find "mFocusedActivity&qu ...

  5. selenium-python元素定位技巧（二）

    在python-selenium元素定位中,有很多小技巧,在此记录总结  技巧一.有关联关系的元素有交集关系时,必须添加固定等待,整体调试时候也适当增加固定等待,保持代码运行稳定性.下拉的时候选择下拉 ...

  6. Git学习笔记（快速上手）

    Git学习 1. 基本使用 安装成功后在开始菜单中会有Git项,菜单下有3个程序:任意文件夹下右键也可以看到对应的程序! Git Bash:Unix与Linux风格的命令行,使用最多,推荐最多 Git ...

  7. windows10环境下gcc环境变量的配置

    1.首先打开控制面板-系统和安全-系统-高级系统设置,打开环境变量 2.在用户变量里找到Path,点击编辑,点击新建,找到Qt的tools安装目录并将目录复制进去保存,我的目录是C:\Qt\Qt5.9 ...

  8. 09：CBV与settings

    CBV源码 # 切入点 url(r'^login/', views.Mylogin.as_view()) '''类名点名字还加括号 名字要么是绑定给类的方法 要么是无参函数''' ​ 1.as_vie ...

  9. 【模板】Tarjian求LCA

    概念 公共祖先,就是两个节点在这棵树上深度最大的公共的祖先节点 举个例子吧,如下图所示4和5的最近公共祖先是2,5和3的最近公共祖先是1,2和1的最近公共祖先是1. 算法 常用的求LCA的算法有:Ta ...

  10. Qt实现网络聊天室（客户端，服务端）

    1. 效果演示 客户端 服务器 连接成功之后 2. 预备知识 如果不知道网络编程的可以去看我的上一篇文章C++网络编程 在Qt中,实现网络编程的方式比用C++或C实现要方便简单许多,因为Qt已经替我们 ...