实例讲解React 组件生命周期


Posted in Javascript onJuly 08, 2020

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

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

  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真实 DOM

生命周期的方法有:

  • componentWillMount 在渲染前调用,在客户端也在服务端。
  • componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
  • componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
  • shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
  • componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
  • componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
  • componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

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

实例

以下实例在 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>
     <h3>{this.props.myNumber}</h3>
    </div>
   );
  }
}
ReactDOM.render(
  <div>
   <Button />
  </div>,
 document.getElementById('example')
);

运行结果

实例讲解React 组件生命周期

以上就是实例讲解React 组件生命周期的详细内容,更多关于React 组件生命周期的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
js实现星星海特效的示例
Sep 28 Javascript
详细分析React 表单与事件
Jul 08 #Javascript
详解JavaScript之ES5的继承
Jul 08 #Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 #jQuery
微信小程序拖拽排序列表的示例代码
Jul 08 #Javascript
基于javascript canvas实现五子棋游戏
Jul 08 #Javascript
深度解读vue-resize的具体用法
Jul 08 #Javascript
详解React 条件渲染
Jul 08 #Javascript
You might like
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
js style动态设置table高度
2014/10/21 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
python聊天程序实例代码分享
2013/11/18 Python
python爬取哈尔滨天气信息
2018/07/14 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
python如何调用php文件中的函数详解
2020/12/29 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
网络教育自我鉴定
2013/11/01 职场文书
工商管理专业应届生求职信
2013/11/04 职场文书
中英文自我评价语句
2013/12/20 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
片区教研活动总结
2014/07/02 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js
Elasticsearch 聚合查询和排序
2022/04/19 Python