React学习笔记-4-什么是生命周期
- 什么是声明周期?
组件本质上就是状态机,输入确定,输出一定确定。如何理解这一点?react有两个特点,第一个就是去除了所有的手动dom操作,也就是使用jsx。第二个就是组件把状态和结果一一对应起来,从而能够直观的看出来,程序在不同的状态是的输出。属性是由父组件传递给子组件的,状态是子组件内部维护的一些数据,当状态发生变化时候,组件也会进行更新,因此我们可以理解成一个state对应一个render的结果,这样我们就可以知道在不同的state下,组件会render出什么样的结果,从而就知道组件在页面上展示的内容是什么。状态机本质上就是状态和转移的结合,我们刚才说过,不同的状态对应不同的输出,状态和状态之间有时候会发生转换,当状态发生转变的时候,会触发不同的钩子函数,从而让开发者有机会做出相应,因为状态转换是由react来进行维护的。作为开发者没有 办法直接的参与到状态转换中,但是react给我们提供了很多钩子函数,我们可以自己来编写这些钩子函数,这样react在进行状态转换的时候,就可以调用我们的状态函数。
我们也可以用事件的思路来理解状态,开发者不知道什么时候会发生事件,但是我们可以决定在发生事件的时候,执行什么动作,也就是事件的监听器,状态和事件有一些类似,他们的区别是事件和事件之间没有直接的关系,每个事件都是独立发生的,但是状态和状态之间是有关系的,组件可以处于不同的状态中,那么组件所有的状态组合起来,就构成了组件的声明周期。 - 组件的生命周期有哪些部分?
初始化阶段:用我们编写的组件代码来生成组件的实例,组件代码就是我们写的class,就像面向对象中的类一样,class是不会真正的被使用的,我们真正使用的是class初始化出来的实例。举个例子,假设我们有一个HelloWorld组件,那么我们在页面的两个地方使用了HelloWorld,这两个地方渲染出来的是两个实例,实例和实例之间是不同的,但是他们都来自同一个组件,也就是他们是使用同一个组件初始化出来的,在初始化阶段,组件会进行一些初始的状态设置,以及渲染,也就是render,在初始化完成之后,实例就会真正的显示在页面上,以被用户使用。
初始化结束以后,就进入了运行中,对于实例来说,绝大部分时间都处于运行中,运行中实例的状态可能发生改变,从而触发一系列的钩子函数,最终这些改变可能导致组件被重新渲染,注意这里我们说的是可能导致,有一些改变可能并不会导致组件被重新渲染,只是内部的状态发生了变动 - 最后就是销毁阶段。不使用组件的时候,就会被销毁
这三者发生的时间是不固定的,需要根据页面来进行判断,这三个阶段只是在逻辑上对组件进行了分类,实际上我们在编写代码的时候,关注的是钩子函数以及他们的用法。 - 不同的声明周期可以自定义的函数
初始化阶段:
getDefaultProps:获取实例的默认属性,这个只会在组件的第一个被初始化的时候被调用,也就是说从第二个组件开始,只会调用其他的。同一个组件所有的实 例,他们拿到的默认属性都是一样的。
getInitialState:获取实例的初始化状态
componentWillMount:组件即将被装载,也就是组件即将被渲染到页面上。注意在这个阶段,组件还没有真正的被渲染
render:组价在render函数中生成虚拟的dom节点,也就是jsx,最后由react把虚拟的dom节点渲染称为真正的dom节点,并放到页面中,让用户可以看到, 并且进行交互
componentDidMount:这个函数和第三个函数的区别will变成到了did也就是说他是在组件被装载之后调用的,这个函数被调用的时候,组件已经被渲染到了 页面中
运行中:
componentWillReceiveProps:组件将要接收到属性的时候调用,如果组件的属性发生变化,比如说父组件改变了组件的属性,那么组件就需要进行更新,准确的说是组件可能要进行更新,这个函数是在接收到属性之前触发的,属性在被传送给组件之前,开发者有机会去处理这样的属性,比如说修改属性,更新一些内部的状态等等,这里属性还是没有被传送个组件,
shouldComponentUpdate:当组件接收到新属性或者新状态的时候,就会触发这个函数,从名字上来看,这个函数是一个疑问句,他说的是组件是否要更新,显然我们可以告诉他组件不需要更新。既然react会帮助我们判断组件是否要更新,那么我们为什么还要去手动进行判断呢?因为有的时候状态或者属性的变化,并不会导致组件发生更新,如果组件不需要更新我们可以直接在这步直接返回false,这样的话,react就不会直接调用render函数,从而可以提高性能,如果我们不进行这样的操作,那么即使render返回的结果一样,react也需要经过render以及diff算法来判断组件是否需要更新,如果我们在这步直接返回false,那么react就不要在进行这两步操作,从而可以提高性能,
componentWillUpdate:他会在render触发之前调用这时候我们是已经处于运行中,需要的是更新操作,而不是装载操作。
render:和我们初始化的render是一样的。
componentDidUpdate:会在render结束之后,真正的dom被创建完毕后被调用。
销毁阶段:componentWillUnmount:这个函数会在销毁真正被执行之前被调用,给开发者一些真正的机会来进行一些清理的操作。
React学习笔记-4-什么是生命周期的更多相关文章
- React使用笔记2-React Components的生命周期
Date: 2015-11-27 21:23 Category: Web Tags: JavaScript Author: 刘理想 [toc] 1. React Components的生命周期 Rea ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- .net学习笔记---Asp.net的生命周期之二页生命周期
用户请求 从 用户角度来说,我不管你后台经历了什么,我只想要我请求的页面.请求到服务器端,服务器必须得有所表示的是吧,即使不想搭理人家也得让IIS给人家说声:找不到服务器.请求来到服务器端,肯定要让服 ...
- .net学习笔记----Asp.net的生命周期之一应用程序生命周期
Http请求刚刚到达服务器的时候 当服务器接收到一个 Http请求的时候,IIS (Internet Information Services,互联网信息服务)首先需要决定如何去处理这个请求. 什么是 ...
- 零基础Android学习笔记-02 安卓程序生命周期
一个安卓程序生命周期会经历7中状态,并不一定是每次都全部经历.Create,Start,ReStart,Pause,Resume,Stop,Destory. 重载方法,用helloWorld程序去体验 ...
- Android(java)学习笔记171:Service生命周期
1.Service的生命周期 Android中的Service(服务)与Activity不同,它是不能和用户交互,不能自己启动的,运行在后台的程序,如果我们退出应用的时候,Servic ...
- Java学习笔记之——线程的生命周期、线程同步
一. 线程的生命周期 新建(new Thrad):创建线程后,可以设置各个属性值,即启动前 设置 就绪(Runnable):已经启动,等待CPU调动 运行(Running):正在被CPU调度 阻塞(B ...
- Angular4学习笔记(九)- 生命周期钩子简介
简介 Angular 指令的生命周期,它是用来记录指令从创建.应用及销毁的过程.Angular 提供了一系列与指令生命周期相关的钩子,便于我们监控指令生命周期的变化,并执行相关的操作.Angular ...
- ASP.NET Core 2 学习笔记(二)生命周期
要了解程序的运行原理,就要先知道程序的进入点及生命周期.以往ASP.NET MVC的启动方式,是继承 HttpApplication 作为网站开始的进入点,而ASP.NET Core 改变了网站的启动 ...
随机推荐
- CodeForces - 261B Maxim and Restaurant
http://codeforces.com/problemset/problem/261/B 题目大意:给定n个数a1-an(n<=50,ai<=50),随机打乱后,记Si=a1+a2+a ...
- javascript中针对float的ceil及floor
function floorFloat(num, precision) { return +(Math.floor(+(num + 'e' + (precision))) + 'e' + -(prec ...
- emmet的使用
http://blog.wpjam.com/m/emmet-grammar/ 使用 Emmet 生成 HTML 的语法详解 开源程序 浏览:21537 2013年05月09日 文章目录[隐藏] 生成 ...
- UOJ79 一般图最大匹配
题目描述 从前一个和谐的班级,所有人都是搞OI的.有 nn 个是男生,有 00 个是女生.男生编号分别为 1,-,n1,-,n. 现在老师想把他们分成若干个两人小组写动态仙人掌,一个人负责搬砖另一个人 ...
- RabbitMQ 集群之镜像同步
mirrored 在上个博文中讲到了如果做集群,那么集群是成功了,但是queue是如何存放的呢?消息又是怎么同步呢. 默认的,也就是什么也不配置,直接在某个节点中添加一个queue,那么它仅仅是属于这 ...
- (转载)哈夫曼编码(Huffman)
转载自:click here 1.哈夫曼编码的起源: 哈夫曼编码是 1952 年由 David A. Huffman 提出的一种无损数据压缩的编码算法.哈夫曼编码先统计出每种字母在字符串里出现的频率, ...
- NOIp2016 游记
DAY -2 不要问我为什么现在就开了一篇博客. 本来想起个NOIp2016爆零记或者NOIp2016退役记之类的,但是感觉现在不能乱立flag了.所以就叫游记算了. 前几场模拟赛崩了一场又一场,RP ...
- python-virtualenv(多个独立开发环境)
1. 安装virtualenv$ sudo yum install python-virtualenv 2. 创建开发环境$ virtualenv env_name 3. 启用开发环境$ cd env ...
- js 中关联数组
以前都不知道这种写法叫做关联数组. 何为关联数组呢.通常的数组在填充时会隐式或者显示指定数组下标,但JS中数组可以以名字的形式为元素赋值,这就形成了关联数组. 例子 var p={ name:'dai ...
- myeclipse环境下开发freemarker
最近在着手一个项目,其中就要使用到freemarker模版,当把html漂亮写完时,改写成freemarker时,问题来了.全屏都是白底黑色,没有高亮显示,没有语法提示,不能格式化.看着眼花,还容易出 ...