React 定义组件的参数-生命周期

定义组件的参数-生命周期
创建期:getDefaultProps
创建期:getInitialState
创建期:componentWillMount
创建期:componentDidMount
存在期:componentWillReceiveProps
存在期:shouldComponentUpdate
存在期:componentWillUpdate
存在期:componentDidUpdate
销毁&清理期:componentWillUnmount

定义组件的参数-生命周期
生命周期相关参数,是React定义组件时提供的一系列处理函数(钓子函数),这些函数会在组件生命周期的某个阶段调用。

创建期:getDefaultProps

object getDefaultProps()

创建期:getInitialState

object getInitialState()
在组件挂载前(即:创建期)调用一次,其返回值将做为this.state的初始值。

getInitialState()方法会组件类创建的时候调用一次,其返回值会被缓存下来。该方法用于设置props属性的默认值,但仅对于非必须属性。如果父组件没有指定props中的某个值,此返回对象中的相应属性将会合并到this.props。

getInitialState()方法会在组件实例创建前调用,这时还不能使用this.props属性,且其返回对象是在所有实例间共享的。

创建期:componentWillMount

componentWillMount()
componentWillMount()服务器端和客户端都只调用一次,在初始化渲染执行之前被调用。如果在这个方法内调用setState()方法,render()方法将会收到更新后的state,也就是说这是我做在组件渲染前最后一个修改state的机会。

创建期:componentDidMount

componentDidMount()
componentDidMount()会在组件初始化(渲染完成)后立即调用一次,我们一般在这个方法中使用this.getDOMNode()方法访问原始DOM。

存在期:componentWillReceiveProps

componentWillReceiveProps(object nextProps)

componentWillReceiveProps在将要接受新的props时被调用
componentWillReceiveProps()方法会在组件生命周期的存在期调用,当组件感知到props属性改变,会调用此方法。render()方法将会在其后调用,这时我们可以通过this.setState()来阻止组件的再次渲染。

存在期:shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState)
shouldComponentUpdate()方法发生在组件生命周期的存在器,在组件收到新的props或state。在这个方法中,我们可以访问组件的props和state属性,通过这两个属性可以确认组件是否需要更新,如果不需要更新,则返回false,则其后的方法将不会在执行。如:

shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id;
}

存在期:componentWillUpdate

componentWillUpdate(object nextProps, object nextState)
componentWillUpdate()会在收到新的props或state后调用,类似componentWillMount()。

存在期:componentDidUpdate

componentDidUpdate(object prevProps, object prevState)
componentDidUpdate()会在组件重新渲染后立即被调用,当我们需要在组件重新渲染后操作DOM则需要使用这个方法。

销毁&清理期:componentWillUnmount

componentWillUnmount()
componentWillUnmount()是组件销毁&清理期唯一调用的方法,它会在组件从DOM中移除时被调用,这时我们可以清理一些状态或清理在componentDidMount中创建的DOM元素。

10个令人惊讶的NodeJS开源项目

在几年的时间里,NodeJS逐渐发展成一个成熟的开发平台,吸引了许多开发者。有许多大型高流量网站都采用NodeJS进行开发,像PayPal,此外,开发人员还可以使用它来开发一些快速移动Web框架。

除了Web应用外,NodeJS也被应用在许多方面,本文盘点了NodeJS在其它方面所开发的十大令人神奇的项目,这些项目涉及到应用程序监控、媒体流、远程控制、桌面和移动应用等等。

  1.NodeOS

NodeOS是采用NodeJS开发的一款友好的操作系统,该操作系统是完全建立在Linux内核之上的,并且采用shell和NPM进行包管理,采用 NodeJS不仅可以很好地进行包管理,还可以很好的管理脚本、接口等。目前,Docker和Vagrant都是采用NodeOS的首个版本进行构建的。

 

  2.Noduino

许多硬件黑客希望通过Web页面即可控制他们的Arduino,Noduino就是这样的一个项目,一个简单灵活的JavaScript和NodeJS 框架,通过使用HTML5、Socket.IO和NodeJS的Web应用来控制Arduino。目前,该项目刚刚启动,支持一些常用功能,比如从 Arduino中捕获事件(例如点击按钮)等。

  3.Node-WebKit

Node-Webkit是一个基于Chromium与NodeJS的应用程序运行器,允许开发者使用Web技术编写桌面应用。它是NodeJS与WebKit技术的融合,提供一个跨Windows、Linux平台的客户端应用开发的底层框架。

跨平台开发并非易事,其中一种方式便是使用Web技术和Node-Webkit开发桌面应用来代替那些庞大且笨重的开发框架。

  4.PDFKit

PDFKit是采用NodeJS开发的一款PDF文档生成库,它使用一个“HTML5 canvas-like API”来创建矢量图形和字体嵌入,并且支持许多标准的PDF功能,如文件的安全性、表的创建、文本换行、项目符号、高亮提示、注释等PDF功能。

注意,PDFKit是一款PDF生成工具,而不是一个文档转换系统。如果你想对现有的PDF文档进行操作,你可以使用另一个NodeJS项目—— Scissors

  5.Log.io

Log.io是一个基于NodeJS开发的实时日志监控项目,在浏览器里访问。需要注意的是,Log.io只监视日志变动并不存储日志,不过这个没关系,只要知道日志存储在哪个机器上。

Log.io使用 Socket.io库发 送活动报告的,和其他的监控工具一样,Log.io也采用服务器-客户端的模式。Log.io由两部分组成:server和 harveste,server运行在机器 A(服务器)上监视和纪录其他机器发来的日志消息;log harvester 运行在机器 B(客户端)上用来监听和收集机器 B上的日志改动,并将改动发送给机器 A,每个需要纪录日志的机器都需要一个harvester。

  6.NodecastLeapcast

受谷歌Chromecast技术的启发,开发者使用NodeJS开发出不少Chromecast仿真应用。如Nodecast或Leapcast。在 PC上运行Nodecast或Leapcast,启动移动设备,选择一个支持Chromecast的应用程序,然后你就可以把移动广播上的内容映射到电脑 上了,把电脑当成一个流媒体使用。

在这两个应用中,Nodecast比较简单些,但相应的功能也比较少,它仅经过了YouTube和Google Music的测试( DEMO)。注意,大家不要把Nodecast与 Nodecast库混淆,后者使用DIAL发现协议提供链接设备(类似Chromecast)。

  7.Nexe

Nexe是一款小巧却非常实用的NodeJS工具,它可以为NodeJS应用创建单一可执行的文件,并且无需安装运行时,这样,一些非技术终端的用户就 无需变动NodeJS应用的所有依赖程序。如果你想发布一个NodeJS应用程序,并且没有GUI,Nexe则是您的最佳选择。目前该应用程序的一个弊端 是不能在Windows平台上工作,只适用于Linux和Mac OS X平台,并且它也不支持本地NodeJS模块。

  8.Hyro

Hyro是使用NodeJS开发的一款实时HTML5编辑器,如下图所示,左边显示HTML源码,右边显示内容。语法高亮由 CodeMirror提供。Hyro并不打算成为一款成熟的Web IDE,更像是一款轻量级的HTML或CSS记事本。

  9.Haroopad

Haroopad是一款Linux上的markdown编辑器,使用Chromium作为UI,支持Windows、Mac OS X和Linux。主题样式丰富,语法标亮支持54种编程语言。 如下图所示,一边是代码编辑窗口,一边是预览窗口,可以实时更新。其邮件导出功能可以将文档发送到Tumblr和Evernote。

  10.TiddlyWiki5

TiddlyWiki是一款交互式的wiki,非常灵活,它也可以在浏览器里作为单一的HTML文件或者是一款功能强大的NodeJS应用程序。

TiddlyWiki5是全新设计的5.0版本,它可以直接集成NodeJS解锁一系列的功能,但在单机模式下是不可用的。目前,TiddlyWiki5仍处于测试阶段。

来自: InfoWorld