组件生命周期

在本章中我们将讨论React组件的生命周期。

组件的生命周期可分为三个状态：

• 安装：已插入真实DOM
• 正在更新：正在被重新渲染
• 正在卸载：已移出真实DOM

生命周期的方法有

下例在Hello组件加载以后，通过componentDidMount方法设置一个计时器，每隔100次重新设置组件的替换，并重新渲染：

反应实例

类Hello 扩展了React 。组件{ 构造函数（道具）{ 超级（道具）;
      这个。状态= { 不透明度：1.0 } ;
  } componentDidMount （）{ 此。计时器= setInterval的（函数（）{ VAR 不透明度= 此。状态。不透明度    






       ;
      不透明度-= .05 ;
      如果（透明度< 0.1 ）{ 透明度= 1.0 ;
      } 这个。setState （{ 不透明度：不透明度} ）;
    } 。绑定（this ），100 ）;
  } render （）{ return （
      < div style = { { 不透明度  






      ：这个。状态。浑浊} } >
         您好{ 这。道具。名称} 
      </ div >
     ）;
  } } ReactDOM 。渲染（
  < 你好名称= “ 世界” />，
   文档。体）; 




`

其他实例初始化状态，setNewnumber用于更新状态。所有生命周期在Content组件中。

反应实例

Button 类扩展了React 。组件{ 构造函数（道具）{ 超级（道具）;
      这个。状态= { 数据：0 } ;
      这个。setNewNumber = this 。setNewNumber 。绑定（这个）;
  } setNewNumber （）{ 此。的setState （{ 数据    




    ：这个。状态。数据+ 1 } ）} 渲染（）{ 返回（
         < DIV > < 按钮的onClick = { 此。setNewNumber } > INCREMENT </ 按钮> < 内容为mynumber = { 此。状态。数据} > </ 内容> </ DIV >
       ）


         ;
    } } 类内容扩展作出反应。组件{ componentWillMount （）{ 控制台。日志（' 组件将安装！' ）} componentDidMount （）{ 控制台。日志（' 组件DID安装！' ）} componentWillReceiveProps （newProps ）{ 控制台。log （' 组件将接收道具！'











        ）} shouldComponentUpdate （newProps ，newState ）{ 返回true ;
  } componentWillUpdate （nextProps ，nextState ）{ 控制台。日志（' 组件将更新！' ）;
  } componentDidUpdate （prevProps ，prevState ）{ 控制台。log （' Component DID UPDATE！' ）} componentWillUnmount








  （）{ 控制台。日志（' 组件将UNMOUNT！' ）} 渲染（）{ 返回（
        < DIV > < H3 > { 此。道具。mynumber的} </ H3 > </ DIV >
       ）;
    } } ReactDOM 。渲染（
   < div > < Button /> </ div >，







文件。getElementById （' example ' ））;

`