转自 明明的博客  http://blog.csdn.net/slandove/article/details/50748473 (非原创)

版权声明:转载请注明出处,欢迎加入QQ群(115402375)讨论!博客编写已经转移到http://blog.csdn.net/limm33

在组件的整个生命周期中,随着该组件的props或者state发生改变,它的DOM表现也将有相应的改变,一个组件就是一个状态机,对于特定的输入,它总会返回一致的输出。

React为每个组件提供了生命周期钩子函数去响应不同的时刻——创建时、存在期及销毁时。

生命周期方法

React的组件拥有简洁的生命周期API,它仅仅提供你所需要的方法,而不会去最求全面。

实例化:

一个实例出吃被穿件时所调用的生命周期方法与其他哥哥后续实例被创建所调用的方法略有不同。当你首次使用一个组建类时,会看到下面这些方法依次被调用:

getDefaultProps

getInitialState

componentWillMount

render

ComponentDidMOunt

对于该组件类所有后续应用,你将会看到下面的方法依次被调用。注意:gerDefaultProps方法不在列表中。

getInitialState

componentWillMount

render

componentDidMount

存在期:

随着应用状态的改变,以及组件逐渐受到影响,你将会看到下面的方法一次被调用:

componentwillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

销毁&清理期:

最后,当该组件被使用完成后,componentWillUnmount方法会被调用,目的是给这个实例提供清理自身的机会。

以下是详细说明:

实例化:

当每个新的组件被创建首次渲染时,有一系列的方法可以用来为其做准备工作,这些方法中的每一个斗殴明确的职责,如下所示:

getDefaultProps

对于组件来说,这个方法只会调用一次,对于那些没有父辈组件指定的props属性的新建实例来说,这个方法返回的对象可用与为实例设置默认的props值。

getInitalState:

对于组件的每个实例来说,这个方法调用次数有且仅有一次,这里你将有机会初始化每个实例的state,与getDefaultProps方法不同的是,每次实例创建时该方法都会被调用一次,这个方法中,可以访问到this.props.

componentWillMount:

该方法在完成首次渲染之前被调用,这也是在render方法调用前可以修改组件state的最后一次机会。

render:

在这里你创建一个虚拟DOM,用来表示组件的输出,对于一个组件来说,render是唯一一个必需的方法,并且有特定的规则。render方法选要满足下面几点:

只能通过this.props和this.state访问数据。

可以返回null,false或者任何React组件。

只能出现一个顶级组件(不能返回一组元素)、

必须纯净,有位置不能改变组件状态或者修改DOM输出。

componentDidMount:

在render方法成功调用并且真实的DOM已经被渲染之后,可以在componentDidMount内部通过this.getDOMNode(方法访问到它。

这就是你可以访问原始DOM的生命周期的钩子函数,当你需要测量DOM元素的高度或者使用计时器操作它或者运行jQuery插件时,可以将这些操作挂载到这个方法上:

举例来说,假设需要在一个通过React渲染出的表单元素上使用jQueryUI的Autocomplete插件,则可以这样使用它:

//需要自动补全的字符串列表

var datasource =[...];

var MyComponent=React.crateClass({

render:function(){

rerurn <input .../>

},

componentDidMount:function(){

$(this.gerDOMNode()).autocomplete({

source:datasource

});

}

});

ps:当React运行在服务器端时候,componentdidmount方法不会被调用。

存在期:

此时组件已经渲染好并且用户可以与它进行交互,通常一次鼠标点击、手指点按或者键盘事件触发一个时间处理器,随着用户改变了组件或则和整个应用的state,便会有新的state流入组件树,并且我们将会获得操控它的机会。

componentWillReceiveProps:

任何时刻组件的props都可以通过父辈组件来更改,出现这种情况时,componentWillReceiveProps方法会被调用,你将获得更改props方法及跟他关心state的机会。例如:

componentWillReceiveProps:function(nextProps){

if(nextProps.checked !==undefined){

this.setState({

checked:nextProps.checked

});

}

}

shouleComponentUpdate:

调用shoulecomponentUpadte方法在组件渲染时进行精确优化。如果某个组件或者它的任何子组件不需要渲染成新的props或则和state,则该方法返回false,返回false则是说明React要跳到render方法,一届位于render前后的钩子函数:componentWillUpadate和componentDidUpdate。

该方法非必需的,并且大部分情况没有必要使用它。

componentWillUpdate:

和componentwillMount:方法类似,组建会在收到新的props或者state进行渲染之前调用该方法。

注意:你不可以在该方法中更新huo或者props。而应该借助componentWillreceiveProps方法在运行时更新state。

componentDidUpdate:

和componentDidMount方法类似,该方法给我们更新已经渲染好的DOM机会。

销毁&清理期

当React使用完一个组件,这个组件必须从DOM中卸载随后被销毁。此时仅有的一个狗子函数会做出响应,完成所有的清理和销毁工作。

componentWillUnmount:

最后,随着组件从他的层级结构中移除,这个组件的生命也就走id熬了尽头,该方法会在组件被移除之前调用,让你有机会做一些清理工作。在componentDidMount方法中添加的所有任务都需要在该方法中撤销,比如穿件的定时器或者添加的事件监听器。

反模式:把计算后的值赋值给state:

getInitalState方法中,尝试通过this.props来创建state的做法是一种反模式。React专注于维护数据的单一来源。它的设计使得传递数据的来源更加显而易见,这激素和iReact的一个优势。

比如在组件中吧日期转化成字符串形式,或者渲染之前字符串转换为大写。这些都不是state,只能够在渲染时进行计算。

当组件的state值和它基于的prop不同步,因而无法了解到render函数内部结构时,可以认定为一种反模式。

//反模式:经过计算后值不应该赋给state

getDefaultProps:function(){

return{

date:newDate()

};

},

getInitalState:function(){

return{

day:this.props.date.getDay()

}

},

render:function(){

return <div>Day:{this.state.day}</day>

}

正确的模式应该是渲染时计算这些值,保证了计算后的值永远不会派生出它的props值不同步。

//渲染时计算值是正确的

gerDefaultProps:function(){

return{

date:new Date()

};

}

render:function(){

var day = this.props.date.getDay();

return <div>Day:{day}</div>;

}

然而,如果你的目的并不是同步,而只是简单的初始化state,那么在getInitialState方法中使用props是没问题的,只是一定要明确你的意图,比如prop添加initial前缀。

getDefaultProps:function(){

return{

initialValue:'some-dafault-value'

};

},

getInitialState:function(){

return{

value:this.props.initialValue

};

},

render:function(){

return <div>{this.props.value}</div>

}

总结:

react生命周期提供了进行设计的钩子函数,会伴随着组件整个生命周期。和状态机类似,每个组件都被设计成了能够在整个生命周期中输出稳定、语义化的标签。

组件不会独立存,随着父组件将props推送给他们的子组件,以及那些子组件渲染它们自身的子组件你必须谨慎的考虑数据是如何流经整个应用的。每一个子组件真正需要掌握多少数据,哪个组件来控制应用的状态?这些涉及数据流了。

版权归原作者所有。如果不愿转载,请谅解联系删除。

React—组件生命周期详解的更多相关文章

  1. vue组件生命周期详解

    Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...

  2. ASP.NET生命周期详解

    最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...

  3. ASP.NET生命周期详解 [转]

    最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...

  4. ASP.NET生命周期详解(转)

    看到好文章需要分享. 最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多 ...

  5. ASP.NT运行原理和页面生命周期详解及其应用

    ASP.NT运行原理和页面生命周期详解及其应用 1. 下面是我画的一张关于asp.net运行原理和页面生命周期的一张详解图.如果你对具体不太了解,请参照博客园其他帖子.在这里我主要讲解它的实际应用.  ...

  6. React组件生命周期小结

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

  7. React生命周期详解

    React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分:  实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...

  8. react 生命周期详解

    state有时候很不听话,在某些时候,我不想他渲染,偏偏react非常智能的帮我们重复渲染. 比如最常见的就是传递的对象为空,组件依旧渲染了一次或者多次. 更多场景不举例了,对症下药. shouldC ...

  9. vue组件的生命周期详解

    1.生命周期&生命周期函数 生命周期:指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段. 生命周期函数:由vue框架提供的内置函数,会伴随着组件的生命周期,自动按序执 ...

随机推荐

  1. 【luogu1325】雷达安装--贪心

    题目描述 描述: 假设海岸线是一条无限延伸的直线.它的一侧是陆地,另一侧是海洋.每一座小岛是在海面上的一个点.雷达必须安装在陆地上(包括海岸线),并且每个雷达都有相同的扫描范围d.你的任务是建立尽量少 ...

  2. 安装包设计-------打包(MFC)---------知识总结

    目录: 1.选择文件夹 2.判断文件夹或文件是否存在 3.通过cmd命令行向程序中传递参数. 4.路径处理 5.文件夹以及文件的删除 6.复制文件 7.创建目录 8.从当前的应用程序中抽取资源 9.引 ...

  3. nodejs基础(回调函数、模块、事件、文件读写、目录的创建与删除)

    node官网:http://nodejs.cn/ 今天想看看node的视频,对node进一步了解, 1.我们可以从官网下载node到自己的电脑上,今天了解到node的真正概念,node时javascr ...

  4. 自制操作系统-使用汇编显示 hello world

    Windows (开机)读软盘第一个扇区的读法的具体表格 Hello World汇编版 就是将16进制编写的代码使用汇编语言编写出来 ; cherry-os ORG 0x7c00 ;指定程序装载的位置 ...

  5. Jenkins+Ant+Git+Jmeter接口自动化

    一.服务器分别安装JKD.Jenkins.Ant.Git.Jmeter 1.JKD安装参考:https://www.cnblogs.com/xiaoxitest/p/6168045.html 2.Je ...

  6. Linux快速编译

    #include<bits/stdc++.h> using namespace std; string name, tmp, s; int main() { cin >> tm ...

  7. Maven的几种新建项目方式

    1. 使用原型创建Maven的java工程 (1) 选择 JDK 的版本,勾选“使用原型创建”,选中 maven-archetype-quickstart,下一步. (2) 填写公司名,填写项目名,修 ...

  8. 字符串匹配 - hash

    之前有写过一篇hash表,不过那是非常久远的时候了,应该是大一刚学一个学期的时候的成果,后来也就不那样写了,后来从xiaoxin那里学习了hash的写法,比较容易用也比较方便多hash,就这样. 分别 ...

  9. SourceTree软件

      A free Git client for Windows and Mac SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端管理工具,同时也是Mer ...

  10. 用JS判断号码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...