React组件生命周期是什么

发布时间:2020-07-09 10:06:22 作者:清晨
来源:亿速云 阅读:167

小编给大家分享一下React组件生命周期是什么,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

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

组件的生命周期可分成三个状态:

生命周期的方法有:

这些方法的详细说明,可以参考官方文档。

实例

以下实例在 Hello 组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒重新设置组件的透明度,并重新渲染:

class Hello extends React.Component {
 
 constructor(props) {
   super(props);
   this.state = {opacity: 1.0};
 }
 
 componentDidMount() {
  this.timer = setInterval(function () {
   var opacity = this.state.opacity;
   opacity -= .05;
   if (opacity < 0.1) {
    opacity = 1.0;
   }
   this.setState({
    opacity: opacity
   });
  }.bind(this), 100);
 }
 
 render () {
  return (
   <div style={{opacity: this.state.opacity}}>
    Hello {this.props.name}
   </div>
  );
 }
}
 
ReactDOM.render(
 <Hello name="world"/>,
 document.body
);

运行结果

React组件生命周期是什么

以下实例初始化 state , setNewnumber 用于更新 state。所有生命周期在 Content 组件中。

class Button extends React.Component {
 constructor(props) {
   super(props);
   this.state = {data: 0};
   this.setNewNumber = this.setNewNumber.bind(this);
 }
 
 setNewNumber() {
  this.setState({data: this.state.data + 1})
 }
 render() {
   return (
     <div>
      <button onClick = {this.setNewNumber}>INCREMENT</button>
      <Content myNumber = {this.state.data}></Content>
     </div>
   );
  }
}
 
 
class Content extends React.Component {
 componentWillMount() {
   console.log('Component WILL MOUNT!')
 }
 componentDidMount() {
    console.log('Component DID MOUNT!')
 }
 componentWillReceiveProps(newProps) {
    console.log('Component WILL RECEIVE PROPS!')
 }
 shouldComponentUpdate(newProps, newState) {
    return true;
 }
 componentWillUpdate(nextProps, nextState) {
    console.log('Component WILL UPDATE!');
 }
 componentDidUpdate(prevProps, prevState) {
    console.log('Component DID UPDATE!')
 }
 componentWillUnmount() {
     console.log('Component WILL UNMOUNT!')
 }
 
  render() {
   return (
    <div>
     <h4>{this.props.myNumber}</h4>
    </div>
   );
  }
}
ReactDOM.render(
  <div>
   <Button />
  </div>,
 document.getElementById('example')
);

运行结果

React组件生命周期是什么

看完了这篇文章,相信你对React组件生命周期是什么有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. 71react_props_组件的生命周期
  2. react组件特点与生命周期

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

react 生命周期 ct

上一篇:[Linux文件]每隔1秒将时间信息写入文件

下一篇:如何用bootstrap table实现数据表格

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》