很多时候,我们的页面数据是动态的。所以,我们需要实时渲染页面:

一、用定时函数setInterval()

组件(输出当前时间):

index.js:

这样每隔1秒页面就会重新渲染一次,这样传进去的时间数据也会更新了。

但是,用setInterval()是有问题的(这里就不作深究),所以引入了下面要说的,组件状态和生命周期概念

注意:以下的内容,你必须用class(类)的方式来编写react组件!

 二、state

代码其实简单易懂,不需要多说,但有一点,数据都是存在state中,并且更新数据的时候是this.setState();

如果你写过微信小程序的话,这里应该很熟悉,setState()更新数据后悔引发页面相应部分的重新渲染(虚拟DOM,diff算法)。

但是!由于setState()方法是异步的,这就会引发如下的一些问题:

很显然,因为异步,在给counter2赋值的时候,取到的this.state.counter的值还是0,那么如何解决这个问题呢?往下看:

react还提供了该方法的拓展:接受一个函数作为参数

该函数将接收先前的状态作为第一个参数,将此次更新被应用时的props做为第二个参数:

preState中,该状态下counter已经加了1(0+1=1),所以取值的时候就是1了,下一章将单独说明setState这个函数。

三、生命周期

①初始化

1、getDefaultProps():设置默认props

2、getInitialState():class语法下没有此钩子函数,直接在constructor中定义this.state。此时可以访问this.props

3、componentWillMount():组件初始化时调用,整个生命周期只调用一次,此时可以修改state

4、render():react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行。此时不能更改state了

5、componentDidMount():组件渲染之后调用,只调用一次。

②更新

6、componentWillReceiveProps(nextProps):组件初始化时不调用,组件接受新的props时调用。

7、shouldComponentUpdate(nextProps, nextState):可以在此对比前后两个props和state是否相同,若相同则返回false阻止更新来提升性能

8、componentWillUpdata(nextProps, nextState):组件初始化时不调用,只有在组件将要更新时才调用,此时可以修改state

9、componentDidUpdate():组件初始化时不调用,组件更新完成后调用,此时可以获取dom节点。

③卸载

10、componentWillUnmount():组件将要卸载时调用,一些事件监听和定时器需要在此时清除。

React之状态(state)与生命周期的更多相关文章

  1. 初识React,Virutal DOM, State以及生命周期

    这是React分类下的第一篇文章,是在了解了一些基本面后,看Tyler文章,边看边理解边写的. React可以看做是MVC中的V,关注的是视图层.React的组件就像Angular的Directive ...

  2. React文档(六)state和生命周期

    想一下之前的章节时钟的例子. 目前为止我们只学习了一直方式去更新UI. 我们调用ReactDOM.render()方法去改变渲染的输出: function tick() { const element ...

  3. React Native 中组件的生命周期

    概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...

  4. React Native 中组件的生命周期(转)

    概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...

  5. react native环境搭建与生命周期

    1.搭建开发环境 英文文档:http://facebook.github.io/react-native/docs/getting-started.html 中文文档:https://reactnat ...

  6. ☕【Java技术指南】「难点-核心-遗漏」Java线程状态流转及生命周期的技术指南(知识点串烧)!

    前提介绍 本章主要介绍相关线程声明周期的转换机制以及声明周期的流转关系以及相关AQS的实现和相关的基本原理,配合这相关官方文档的中英文互译的介绍. 线程状态流转及生命周期 当线程被创建并启动以后,它既 ...

  7. 【React 资料备份】React v16.3之后的生命周期

    React v16.4 的生命周期图 React v16.4 的生命周期 变更缘由 原来(React v16.0前)的生命周期在React v16推出的Fiber之后就不合适了,因为如果要开启asyn ...

  8. 【react】---17新增的生命周期

    一.废除的生命周期 官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug,尤其是对于异步渲染的版本 由于未来采用异步渲染机制,所以即将在17版本中去掉的生命周期钩子函数 com ...

  9. React(四)组件生命周期

    组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: componentWillMoun ...

  10. React对比Vue(05 生命周期的对比)

    先来vue的吧,先上图,生命周期就好比一个人重出生到青少年再到青年再到中年在到老年到死亡的一个过程,不同的过程做不同的事情. 好了,上代码 beforeCreate :数据还没有挂载呢,只是一个空壳 ...

随机推荐

  1. tomcat结合nginx或apache做负载均衡及session绑定

    1.tomcat结合nginx做负载均衡,session绑定 nginx:192.168.223.136   tomcat:192.168.223.146:8081,192.168.223.146:8 ...

  2. 20135302魏静静——linux课程第六周实验及总结

    linux课程第六周实验及总结 实验及学习总结 1.进程描述符task_struct数据结构 进程的作用: 将信号.进程间通信.内存管理和文件系统联系起来 操作系统的三大功能: 进程管理.内存管理.文 ...

  3. jdbctemplate中的queryForInt方法

    今天才发现,原来spring 3.2.2之后,jdbctemplate中的queryForInt已经被取消了! 看下代码: 原来是这样写的: String sql = "SELECT cou ...

  4. du df 磁盘命令

    du命令是检查硬盘使用情况,统计文件或目录及子目录使用硬盘的空间大小.参数的不同组合,可以更快的提高工作效率,以下仅列出了经常使用到的参数,如需更详细的信息,请用man du命令来获得.   说明 - ...

  5. caffe2+cuda+Ubuntu16.04(u盘安装)

    安装caffe2 预先准备.安装gflags及autoconf及GLOG https://github.com/caffe2/caffe2/issues/1810 一.下载源代码通过网盘 https: ...

  6. mathematical method

    mathematical method 曲线拟合 指数 \(lnY = lna + bX\) 对数 \(Y = blnX + a\) 幂函数 \(lgY=lga+blgX\) 多元线性回归模型 回归分 ...

  7. 2017 ACM-ICPC 亚洲区(南宁赛区)网络赛 A题 Weather Patterns

    2017-09-25 15:49:45 writer:pprp 阅读理解,当时没有耐心去读,只要能读懂就大概可以做出来 题意如下: 有四种天气, State 1: snow State 2: rain ...

  8. awk字符串处理

    awk 字符串处理函数 awk提供了许多强大的字符串函数,见下表:awk内置字符串函数gsub(r,s)    在整个$0中用s替代rgsub(r,s,t)    在整个t中用s替代rindex(s, ...

  9. response.getWriter().write("中文");乱码问题

    起初遇到这个问题,网上几乎所有的建议都是: response.setHeader("Content-type", "text/html;charset=UTF-8&quo ...

  10. BZOJ3224 Tyvj 1728 普通平衡树(Treap)

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...