在线课堂 - 汇智网组件的详细说明和生命周期（Component Specs and Lifecycle） | React
组件的详细说明和生命周期（Component Specs and Lifecycle）
组件的详细说明（Component Specifications）
当通过调用 React.createClass() 来创建组件的时候，你应该提供一个包含 render 方法的对象，并且也可以包含其它的在这里描述的生命周期方法。
render ReactComponent render()
render() 方法是必须的。
当调用的时候，会检测 this.props 和 this.state，返回一个单子级组件。该子级组件可以是虚拟的本地 DOM 组件（比如 &div /& 或者 React.DOM.div()），也可以是自定义的复合组件。
你也可以返回 null 或者 false 来表明不需要渲染任何东西。实际上，React 渲染一个 &noscript& 标签来处理当前的差异检查逻辑。当返回 null 或者 false 的时候，this.getDOMNode() 将返回 null。
render() 函数应该是纯粹的，也就是说该函数不修改组件 state，每次调用都返回相同的结果，不读写 DOM 信息，也不和浏览器交互（例如通过使用 setTimeout）。如果需要和浏览器交互，在 componentDidMount() 中或者其它生命周期方法中做这件事。保持 render() 纯粹，可以使服务器端渲染更加切实可行，也使组件更容易被理解。
getInitialState object getInitialState()
在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
getDefaultProps object getDefaultProps()
在组件类创建的时候调用一次，然后返回值被缓存下来。如果父组件没有指定 props 中的某个键，则此处返回的对象中的相应属性将会合并到 this.props （使用 in 检测属性）。
该方法在任何实例创建之前调用，因此不能依赖于 this.props。另外，getDefaultProps() 返回的任何复杂对象将会在实例间共享，而不是每个实例拥有一份拷贝。
propTypes object propTypes
propTypes 对象允许验证传入到组件的 props。更多关于 propTypes 的信息，参考。
mixins array mixins
mixin 数组允许使用混合来在多个组件之间共享行为。更多关于混合的信息，参考。
statics object statics
statics 对象允许你定义静态的方法，这些静态的方法可以在组件类上调用。例如：
var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
render: function() {
MyComponent.customMethod('bar');
在这个块儿里面定义的方法都是静态的，意味着你可以在任何组件实例创建之前调用它们，这些方法不能获取组件的 props 和 state。如果你想在静态方法中检查 props 的值，在调用处把 props 作为参数传入到静态方法。
displayName string displayName
displayName 字符串用于输出调试信息。JSX 自动设置该值；参考。
生命周期方法
许多方法在组件生命周期中某个确定的时间点执行。
挂载： componentWillMount componentWillMount()
服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。如果在这个方法内调用 setState，render() 将会感知到更新后的 state，将会执行仅一次，尽管 state 改变了。
挂载： componentDidMount componentDidMount()
在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）。在生命周期中的这个时间点，组件拥有一个 DOM 展现，你可以通过 this.getDOMNode() 来获取相应 DOM 节点。
如果想和其它 JavaScript 框架集成，使用 setTimeout 或者 setInterval 来设置定时器，或者发送 AJAX 请求，可以在该方法中执行这些操作。
为了兼容 v0.9，DOM 节点作为最后一个参数传入。你依然可以通过 this.getDOMNode() 获取 DOM 节点。
更新： componentWillReceiveProps componentWillReceiveProps(object nextProps)
在组件接收到新的 props 的时候调用。在初始化渲染的时候，该方法不会调用。
用此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state 的机会。老的 props 可以通过 this.props 获取到。在该函数中调用 this.setState() 将不会引起第二次渲染。
componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount & this.props.likeCount
对于 state，没有相似的方法： componentWillReceiveState。将要传进来的 prop 可能会引起 state 改变，反之则不然。如果需要在 state 改变的时候执行一些操作，请使用 componentWillUpdate。
更新： shouldComponentUpdate boolean shouldComponentUpdate(object nextProps, object nextState)
在接收到新的 props 或者 state，将要渲染之前调用。该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会。
如果确定新的 props 和 state 不会导致组件更新，则此处应该 返回 false。
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id;
如果 shouldComponentUpdate 返回 false，则 render() 将不会执行，直到下一次 state 改变。（另外，componentWillUpdate 和 componentDidUpdate 也不会被调用。）
默认情况下，shouldComponentUpdate 总会返回 true，在 state 改变的时候避免细微的 bug，但是如果总是小心地把 state 当做不可变的，在 render() 中只从 props 和 state 读取值，此时你可以覆盖 shouldComponentUpdate 方法，实现新老 props 和 state 的比对逻辑。
如果性能是个瓶颈，尤其是有几十个甚至上百个组件的时候，使用 shouldComponentUpdate 可以提升应用的性能。
更新： componentWillUpdate componentWillUpdate(object nextProps, object nextState)
在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。
使用该方法做一些更新之前的准备工作。
你不能在该方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变，请使用 componentWillReceiveProps。
更新： componentDidUpdate componentDidUpdate(object prevProps, object prevState)
在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。
使用该方法可以在组件更新之后操作 DOM 元素。
为了兼容 v0.9，DOM 节点会作为最后一个参数传入。如果使用这个方法，你仍然可以使用 this.getDOMNode() 来访问 DOM 节点。
移除： componentWillUnmount componentWillUnmount()
在组件从 DOM 中移除的时候立刻被调用。
在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。
A Facebook & Instagram collaboration.
Facebook Inc.
Documentation licensed under .ReactJS入门（二）—— 组件的生命周期
如果你熟悉avalon，使用过&data-include-rendered 和 data-include-loaded 等回调方法，那么你会很好地理解React组件的各个生命周期。
说白了其实就是React组件状态变化前后的时间点，我们可以利用生命周期的接口在相应的时间点做回调操作。
React的提及了如下几个组件的生命周期：
Mounting/组件挂载相关:&
componentWillMountcomponentDidMount
Updating/组件更新相关:
componentWillReceivePropsshouldComponentUpdatecomponentWillUpdatecomponentDidUpdate
Unmounting/组件移除相关:
componentWillUnmount&
下面我们将通过一些实例来理解它们。顺便说下本文的示例都可以在上下载到。
一. Mounting/组件挂载相关
componentWillMount
在组件挂载之前执行操作，但进执行一次，即使多次重复渲染该组件，或者改变了组件的state：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&componentWillMount&/title&
&script src="react.js"&&/script&
&script src="JSXTransformer.js"&&/script&
&div id="a"&123&/div&
&script type="text/jsx"&
var i = 0;
var Component1 = React.createClass({
componentWillMount: function(){
console.log(i++)
getInitialState: function() {
isClick: !1
clickCb: function() {
this.setState({
isClick : !0
render: function() {
return &div onClick={this.clickCb}&isClick:{this.state.isClick? 'yes' : 'nope'}&/div&
var div = document.getElementById('a');
React.render(
&Component1 /&,div
React.render(
&Component1 /&,div
如果希望该回调能执行多次，可以使用&React.unmountComponentAtNode（该方法我们下篇文章再介绍）移除掉已有的组件，然后再重新 render：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&componentWillMount&/title&
&script src="react.js"&&/script&
&script src="JSXTransformer.js"&&/script&
&div id="a"&123&/div&
&script type="text/jsx"&
var i = 0;
var Component1 = React.createClass({
componentWillMount: function(){
console.log(i++)
getInitialState: function() {
isClick: !1
clickCb: function() {
this.setState({
isClick : !0
render: function() {
return &div onClick={this.clickCb}&isClick:{this.state.isClick? 'yes' : 'nope'}&/div&
var div = document.getElementById('a');
React.render(
&Component1 /&,div
React.unmountComponentAtNode(div);
//移除掉已有组件
React.render(
&Component1 /&,div
可以看到输出了两行：
componentDidMount
顾名思义可以猜到这个是在组件初始化挂载之后执行的，比如我们可以利用它来隐藏掉页面的loading菊花层。
同&componentWillMount 一样，同一个组件重复渲染只执行一次，卸载组件后重新渲染可以重新触发一次：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&componentDidMount&/title&
&script src="react.js"&&/script&
&script src="JSXTransformer.js"&&/script&
&div id="a"&123&/div&
&div id="b"&123&/div&
&script type="text/jsx"&
var i = 0,
div = document.getElementById('a'),
div2 = document.getElementById('b');
var Component1 = React.createClass({
componentDidMount: function(){
console.log(i++)
clickCb: function() {
React.render(
&Component1 /&, div2
render: function() {
return &div onClick={this.clickCb}&点我给下一个div挂载组件&/div&
React.render(
&Component1 /&, div
//React.unmountComponentAtNode(div);
//移除掉已有组件
React.render(
&Component1 /&, div
注意上述代码点击div1时会将组件挂载到div2上，触发div2的组件的&componentDidMount 回调（毕竟div1和div2上的组件并非同一个）。
二. Updating/组件更新相关:
componentWillReceiveProps
在组件接收到新props的时间点之前调用，注意组件初始化渲染时则不会执行：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&componentWillReceiveProps&/title&
&script src="react.js"&&/script&
&script src="JSXTransformer.js"&&/script&
&div id="a"&123&/div&
&div id="b"&123&/div&
&script type="text/jsx"&
var i = 0,
div = document.getElementById('a'),
div2 = document.getElementById('b');
var Component1 = React.createClass({
componentWillReceiveProps: function(){
console.log(i++)
clickCb: function() {
React.render(
&Component1 /&, div2
render: function() {
return &div onClick={this.clickCb}&点我给下一个div挂载组件&/div&
React.render(
&Component1 /&, div
//初始化不会触发componentWillReceiveProps
React.render(
&Component1 /&, div
//重复渲染会触发componentWillReceiveProps
React.unmountComponentAtNode(div);
//移除掉已有组件
React.render(
&Component1 /&, div
//初始化不会触发componentWillReceiveProps
注意我们移除掉组件再挂载的时候，相当于重新初始化渲染了组件（得到的props是初始化props而不是新props），故不会触发&componentWillReceiveProps 。
而当我们在div2挂载了组件后再点击div2来重新渲染它的组件，会触发&componentWillReceiveProps ：
该接口带有一个参数 nextProps，我们可以利用它来获取新 props 的值（this.props 获取到的是当前的，也就是旧的 props）：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&componentWillReceiveProps&/title&
div:active{color:orangered;}
&script src="react.js"&&/script&
&script src="JSXTransformer.js"&&/script&
&div id="a"&123&/div&
&script type="text/jsx"&
var i = 0,
div = document.getElementById('a'),
render = function(){
React.render(
&Component1 i={i++} /&, div
var Component1 = React.createClass({
componentWillReceiveProps: function(nextProps){
console.log(this.props.i, nextProps.i)
render: function() {
return &div onClick={render}&props.i的值是：{this.props.i}&/div&
通过点击div1的组件，可以输出&componentWillReceiveProps 时间点（这时候还没重新执行渲染）的 props 以及即将获取到的新 props，执行如下：
shouldComponentUpdate
前面咱们学习的接口都是叫 componentXXX，而这个把 should 放在前面，翻译过来其实就是&是否应该XXX&的意思，那么可以把该接口直接理解为&组件是否应该做更新&的意思，即其了一个决定组件要不要重新渲染的作用。
该接口实际是在组件接收到了新的 props 或者新的 state 的时候（该时间点render还没执行哦）会立即调用，然后通过返回值（Boolean）来决定是否要重新渲染当前的组件。
该接口带有两个参数，第一个参数表示新的props，第二个参数表示新的state。
我们来个例子，比方要求div要点击3次之后，才重新渲染自身组件：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&shouldComponentUpdate&/title&
div:active{color:orangered;}
&script src="react.js"&&/script&
&script src="JSXTransformer.js"&&/script&
&div id="a"&123&/div&
&script type="text/jsx"&
var div = document.getElementById('a');
var Component1 = React.createClass({
getInitialState: function(){
return { i : 0 }
shouldComponentUpdate: function(nextProps, nextState){
console.log( this.state.i, nextState.i );
return nextState.i & 3 ? true : false; //返回true才会渲染组件
clickCb: function(){
this.setState({
i : this.state.i + 1
render: function() {
return &div onClick={this.clickCb}&state.i的值是：{this.state.i}&/div&
React.render(
&Component1 /&, div
执行如下，点击第四次之后才会渲染组件，在div里显示出正确的新state.i：
componentWillUpdate
同&shouldComponentUpdate 一样，在组件收到新的 props 或者 state 的时候会立即调用，而且也有着俩个参数来获取新的 props 和 state。
不过本接口会在&shouldComponentUpdate 执行并返回了 true 的时候才会被调用。我们拿上一个代码示例做点小修改：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&componentWillUpdate&/title&
div:active{color:orangered;}
&script src="react.js"&&/script&
&script src="JSXTransformer.js"&&/script&
&div id="a"&123&/div&
&script type="text/jsx"&
var div = document.getElementById('a');
var Component1 = React.createClass({
getInitialState: function(){
return { i : 0 }
shouldComponentUpdate: function(nextProps, nextState){
console.log( this.state.i, nextState.i );
return nextState.i & 3 ? true : false; //返回true才会执行componentWillUpdate并重新渲染组件
componentWillUpdate: function(nextProps, nextState){
console.log( 'yoyoyo', this.state.i, nextState.i );
clickCb: function(){
this.setState({
i : this.state.i + 1
render: function() {
return &div onClick={this.clickCb}&state.i的值是：{this.state.i}&/div&
React.render(
&Component1 /&, div
利用这个接口，我们可以在组件要重新渲染之前做一些需要的改动。
componentDidUpdate
Did表示完成时状态，故该接口会在组件更新、重新渲染完毕了之后才触发，它和&componentWillUpdate 一样有着俩个参数来获取新的 props 和 state。
我们继续拿上一个例子来做修改：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&componentDidUpdate&/title&
div:active{color:orangered;}
&script src="react.js"&&/script&
&script src="JSXTransformer.js"&&/script&
&div id="a"&123&/div&
&script type="text/jsx"&
var div = document.getElementById('a');
var Component1 = React.createClass({
getInitialState: function(){
return { i : 0 }
shouldComponentUpdate: function(nextProps, nextState){
console.log( this.state.i, nextState.i );
return nextState.i & 3 ? true : false; //返回true才会执行componentWillUpdate并重新渲染组件
componentDidUpdate: function(nextProps, nextState){
console.log( '已经渲染完毕咯', this.state.i, nextState.i );
componentWillUpdate: function(nextProps, nextState){
console.log( '还没渲染哦', this.state.i, nextState.i );
clickCb: function(){
this.setState({
i : this.state.i + 1
render: function() {
return &div onClick={this.clickCb}&state.i的值是：{this.state.i}&/div&
React.render(
&Component1 /&, div
执行如下：
三. Unmounting/组件移除相关:
componentWillUnmount&
在组件要被移除之前的时间点触发，可以利用该方法来执行一些必要的清理，比如清除无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素等：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&componentWillUnmount&/title&
div:active{color:orangered;}
&script src="react.js"&&/script&
&script src="JSXTransformer.js"&&/script&
&div id="a"&123&/div&
&div id="b"&&p&这里是div2，点击我会移除上面div的组件&/p&&/div&
&script type="text/jsx"&
var div = document.getElementById('a'),
div2 = document.getElementById('b');
var Component1 = React.createClass({
DOMArr : [],
getInitialState: function(){
return { i : 0 }
componentDidUpdate: function(nextProps, nextState){
var dom = document.createElement('p');
dom.innerText = this.state.i;
div2.appendChild(dom);
this.DOMArr.push(dom);
componentWillUnmount: function(){
if(!this.DOMArr.length) return;
var i = 0;
while(i & this.DOMArr.length){console.log(i);
div2.removeChild(this.DOMArr[i++]); //移除componentDidUpdate里添加过的DOM
clickCb: function(){
this.setState({
i : this.state.i + 1
render: function() {
return &div onClick={this.clickCb}&state.i的值是：{this.state.i}&/div&
React.render(
&Component1 /&, div
div2.addEventListener('click',function(){
React.unmountComponentAtNode(div) //点击div2则卸载掉第一个div里的组件
执行如下：
四.&getDefaultProps 和 getInitialState&
在《React 引领未来的用户界面开发框架》一书中，还把&getDefaultProps 和 getInitialState 列入了组件生命周期的&实例化&阶段。
getDefaultProps
该方法是所有我们提及的方法中最先触发的，你可以在该方法里 return 一个对象来作为组件默认的Props值（当然如果父组件传进来了props，则以传进来的为主），它只在组件初次挂载到页面上时触发一次，即使你重新挂载了组件。
getInitialState&
这个在第一篇文章的时候就介绍过了，它用于给组件初始化state的值，调用该方法要求必须 return 一个对象或者null，否则会报错。该方法在组件每次实例化（也就是挂载）的时候都会触发。
我们来段简单的代码辅助理解：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&getDefaultProps 和 getInitialState&/title&
div:active{color:orangered;}
&script src="react.js"&&/script&
&script src="JSXTransformer.js"&&/script&
&div&&/div&
&div&&/div&
&script type="text/jsx"&
var diva = document.getElementsByTagName('div')[0],
divb = document.getElementsByTagName('div')[1];
var Component1 = React.createClass({
getDefaultProps: function(){
console.log('getDefaultProps');
return { name : Date.now() }
getInitialState: function(){
console.log('getInitialState');
return null; //必须返回一个null或对象，否则会报错
render: function() {
console.log(Date.now());
return &div name={this.props.name}&我只是一个安静的div&/div&
React.render(
{/* 触发一次 getDefaultProps 和 getInitialState */}
&Component1 /&, diva
React.render(
{/* getDefaultProps 和 getInitialState都不触发 */}
&Component1 /&, diva
React.unmountComponentAtNode(diva);
React.render(
{/* 触发一次getInitialState */}
&Component1 name="a"/&, diva
React.render(
{/* 触发一次getInitialState */}
&Component1/&, divb
执行结果：
至此我们便学习完了React组件里的共九个声明周期的接口，最后出道题给大家思考下，下面的代码输出的顺序应该是什么呢：
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&题目&/title&
div:active{color:orangered;}
&script src="react.js"&&/script&
&script src="JSXTransformer.js"&&/script&
&script type="text/jsx"&
var Component1 = React.createClass({
getDefaultProps: function(){
console.log('getDefaultProps')
getInitialState: function(){
console.log('getInitialState');
return null
componentWillMount: function(){
console.log('componentWillMount')
componentDidMount: function(){
console.log('componentDidMount')
componentWillReceiveProps: function(){
console.log('componentWillReceiveProps')
shouldComponentUpdate: function(){
console.log('shouldComponentUpdate');
return true;
componentWillUpdate: function(){
console.log('componentWillUpdate')
componentDidUpdate: function(){
console.log('componentDidUpdate')
componentWillUnmount: function(){
console.log('componentWillUnmount')
render: function() {
return &div&我只是一个安静的div&/div&
React.render(
&Component1 /&, document.body
React.render(
&Component1 /&, document.body
React.unmountComponentAtNode(document.body)
建议思考完了再往下滚动看答案吧，如果想不起来，可以翻到文章前面在回顾一下，多温习多思考，总是好习惯。
顺便再提一下，本文的全部示例都可以在上下载到。
关于上方问题的答案如下：
最后建议大家多实践，不局限于看文章。也希望本文能对你有所帮助，共勉~
> 本站内容系网友提交或本网编辑转载，其目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请及时与本网联系，我们将在第一时间删除内容！
什么是生命周期? 组件本质上是一个状态机,输入确定,输出一定确定. 当状态改变的时候 会触发不同的钩子函数,可以让开发者做出响应..
一个组件的生命周期可以概括为
初始化:状态下 可以自定义的函数 getDefaultProps object getDefaultProps() 在组件类创建的时候调用一次,然后返回值被缓存下来.如果父组件没有指定 p ...
Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器. 一:了解四大基本组件 Activity : 应用程序中,一个Activity通常就是一个单独的屏幕,它上面可以显示一些控件也可以监听并处理用户的事件做出响应. Activity之间通过Intent进 ...
Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器. 声明:本文是由作者转载而来,一是想便于自己日后的学习,二是分享给大家. 出处:/bravestarrhu/archive//24794 ...
转载自:/bravestarrhu/archive//2479461.html Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器. 一:了解四大基本组件 Activity : 应用程序中 ...
Android四大基本组件介绍与生命周期 Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器. 一:了解四大基本组件 Activity : 应用程序中,一个Activity通常就是一个单独的屏幕,它上面可以显示一些控件也可以监听并处理用户的事件做出响应 ...
组件实例化生命周期描述了用组件类创建组件对象时所发生的一系列步骤,作为生命周期的一部分,flex自动调用组件的的方法,发出事件,并使组件可见. 下面例子用as创建一个btn控件,并将其加入容器中 var boxContainer:Box = new Box(); //设置Box容器 ... //创建btn var b:Button = new Button( ...
本文参考Adobe flex 4.6 help,写作目的仅为了个人加强记忆与体会 Flex 4以上版本中,可视组件分为spark和halo两套,spark用组件类和皮肤类的分离大大提高了对自定义外观的支持,特别是对于某些子皮肤部件移动位置改变布局的自定义外观,再也不需要大费周章的重写组件的updateDisplay方法了. 两套组件在生命周期上其实差别不大
来源:Android开发之Android应用组件的生命周期 随着移动终端的不断发展,尤其是对消费者类型产品而言,用户已经不再满足于基本的功能需求,绚丽的UI和良好的用户体验逐渐成为用户关注的重点.Android在UI方面做了大量的工作,整个应用架构显得非常灵活且易扩展,在提供了丰富组件的基础上,为开发者进行差异化方面的工作提供了强大的支持. 对Android ...