React State和生命周期 3
微信小程序开发交流qq群 173683895
承接微信小程序开发。扫码加微信。
一：组件的生命周期
组件的生命周期可分成三个状态：
- 安装：已插入真实DOM
- 更新：正在被重新渲染
- 卸载：已移出真实DOM
生命周期的方法有：
componentWillMount在渲染前调用，在客户端也在服务端。
componentDidMount：在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode（）来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout，setInterval或者发送AJAX请求等操作（防止异步操作阻塞UI）。
componentWillReceiveProps在组件接收到一个新的prop（更新后）时被调用。这个方法在初始化渲染时不会被调用。
shouldComponentUpdate返回一个布尔值。在组件接收到新的道具或者状态时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。componentWillUpdate在组件接收到新的道具或者状态但还没有渲染时被调用。在初始化时不会被调用。
componentDidUpdate在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从DOM中移除之前立刻被调用。
二：React 的State
1.State是什么？
State是组件的数据。
2.为什么要有State？
如果没有Stare,那么每次更新组件内的数据都需要重新执行ReactDOM.render()渲染;
3.State作用是什么？
学过前端的应该都知道ajax，在React里面，State就是充当着异步渲染节点的作用，
下面举三个例子：（会自动走动的时钟）
示例1：没有State的时钟代码实现：
function Clock(props){return(<div>{props.date.toLocaleTimeString()}</div>);
}
setInterval(()=>{ReactDOM.render(<Clock date={new Date()}/>,document.getElementById('root'));
},1000)代码说明：每次更新时钟都需要重新渲染ReactDOM.render();
示例二：有State的时钟代码实现：(设计到的东西稍微有点多，所以会加详细注释)
class Clock extends React.Component{
// 创建一个派生类（Clock）继承 React 的 Component 组件类。constructor(props){// 调用父类的构造函数, 并将 Component 的 props 提供给 Clock 的"props"。super(props);// 注意: 在派生类中, 必须先调用 super() 才能使用 "this"。this.state = {date:new Date()};//给派生组件类的state申明一个date属性。}componentDidMount(){//它是一个生命周期钩子函数，在第一次渲染后调用。this.timerID = setInterval(()=>{//给当前组件对象添加一个timerID属性(方便清空的时候调用当前函数),每过一秒就重新给state内的date重新赋值this.setState({date:new Date()})},1000);}componentWillUnmount(){//它是一个生命周期钩子函数，在组件从DOM中移除之前立刻被调用。clearInterval(this.timerID);//清空当前组件 timerID 属性的 clearInterval 循环，停止计时器。}render(){return(<div>{this.state.date.toLocaleTimeString()}</div>);}
}ReactDOM.render(<Clock />,document.getElementById('root'));代码说明：通过修改组件的state达到实时渲染组件但是只需要执行一次ReactDOM渲染的目的。
示例1和示例2的效果图：
注意事项：state更新可能是异步的，所以不能依赖它们的值来进行计算：
错误示例：
this.setState({data:this.state.data + this.props.num
})正确示例：（使用setState接受函数，将组件本身的state作为第一个参数，将更新作为第二个参数）
this.setState((state,props)=>({data: state.data + props.num
}));示例3：在自定义组件里面镶入state ,再次强调，自定义组件开头字母必须大写
function MyDate(props){return <div>{props.date.toLocaleTimeString()}</div>;
}
class Clock extends React.Component{constructor(props){super(props);this.state = {date:new Date()};}componentDidMount(){this.timerID = setInterval(()=>this.tick(),1000);}componentWillUnmount(){clearInterval(this.timerID);}tick(){this.setState({date:new Date()});}render(){return(<div><h1>hello</h1><MyDate date={this.state.date}/></div>);}
}
ReactDOM.render(<Clock />,document.getElementById('root')
);运行效果图：
相关文章：
TCP/IP 笔记 1.3 IP:网际协议
---恢复内容开始--- I P是T C P / I P协议族中最为核心的协议。所有的 T C P、U D P、I C M P及I G M P数据都以I P数据报格式传输。 不可靠( u n r e l i a b l e)的意思是它不能保证 I P数据报能成功地到达目的地。 I P仅提供最好的传输服务。如果发生某种错误时ÿ…
keras bi-lstm_LSTM用于文本生成的应用介绍-使用Keras和启用GPU的Kaggle Kernels
keras bi-lstmby Megan Risdal梅根里斯达尔(Megan Risdal) LSTM用于文本生成的应用介绍-使用Keras和启用GPU的Kaggle Kernels (An applied introduction to LSTMs for text generation — using Keras and GPU-enabled Kaggle Kernels) Kaggle recently gave data scientists …
201521123013 《Java程序设计》第13周学习总结
1. 本周学习总结 2. 书面作业 Q1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn，分析返回结果有何不同？为什么会有这样的不同？ ping值不同（time列），cec.jmu.edu.cn的ping值比较小。ping值&am…
React 事件 4
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 将参数传递给事件处理程序 在循环内部，通常需要将额外的参数传递给事件处理程序。例如，如果id是行ID，则以下任何一个都可以工作： <button onClick{(e…
border-radius
周知：OPPO R819T Android 4.2.1和红米某些机型上，webview中，如果一个元素定义了 border border-radius，这时如果该元素有背景，那么背景将会溢出圆角之外，Yo新增了一个方法来fix这个问题，大家之…
javascript调试_如何提高JavaScript调试技能
javascript调试Almost all software developers who have written even a few lines of code for the Web have had at least a quick glance at JavaScript. After all, it is currently one of the most in-demand programming languages.几乎所有甚至为Web编写了几行代码的软…
Java transient
原文出自：http://www.importnew.com/21517.html 1. transient的作用及使用方法 我们都知道一个对象只要实现了Serilizable接口，这个对象就可以被序列化，java的这种序列化模式为开发者提供了很多便利，我们可以不必关系具体序列化的…
KBMMW 的日志管理器
kbmmw 4.82 最大的新特性就是增加了 日志管理器。 新的日志管理器实现了不同类型的日志、断言、异常处理、计时等功能。 首先。引用kbmMWLog.pas 单元后，系统就默认生成一个IkbmMWLog 实例： Log:IkbmMWLog; log 默认使用对应操作系统的日志功能。 为了能…
React 循环渲染 5
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 使用循环渲染的demo： const todoItems todos.map((todo) ><li key{todo.id}>{todo.text}</li> ); const todoItems todos.map((todo, index) >// Only do this if item…
面试时与人事交谈时间_如何与您的技术负责人交谈并解决通讯故障
面试时与人事交谈时间by Greg Sabo由格雷格萨博(Greg Sabo) 如何与您的技术负责人交谈并解决通讯故障 (How to talk to your tech lead and fix your communication glitches) Here’s where you messed up.这是你搞砸的地方。 Your tech lead told you to build out a new A…
inotify简介
一、inotify简介 inotify是Linux内核2.6.13 (June 18, 2005)版本新增的一个子系统（API），它提供了一种监控文件系统（基于inode的）事件的机制，可以监控文件系统的变化如文件修改、新增、删除等，并…
链路层寻址与 ARP
一、 MAC 地址 不是主机或路由器具有链路层地址，而是它们的适配器（即网络接口）具有链路层地址。因此，具有多个网络接口的主机或路由器将具有与之相关联的多个链路层地址。 然而，链路层交换机并不具有与它们接口相关联的…
React 开始制作 6
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 从模拟开始 第1步：将UI分解为组件层次结构 不同的颜色为不同的组件， 第2步：在React中构建静态版本 第3步：确定UI状态的最小（但完整ÿ…
php 空间类元素引入_引入单元素模式
php 空间类元素引入by Diego Haz迭戈哈兹(Diego Haz) 引入单元素模式 (Introducing the Single Element Pattern) 使用React和其他基于组件的库创建可靠的构建基块的规则和最佳实践。 (Rules and best practices for creating reliable building blocks with React and other …
Tcl学习之--列表|字典
【列表|字典】Tcl使用列表来处理各种集合，比方一个目录中的全部文件，以及一个组件的全部选项。最简单的列表就是包括由随意个空格、制表符、换行符、分隔的随意多个元素的字符串。比方: JerryAlice Mandy David l lindex命令: --> 获取元素 至少须要…
JAVA代码实现下载单个文件，和下载打包文件
//下载单个文件调用方法 /** * response * imgPath 下载图片地址 * fileName 保存下载文件名称 * date 2015年4月14日 下午5:53:24 */ public static void download(HttpServletResponse response,String imgPath,String fileName){ OutputStrea…
php读取本地xlsx格式文件的数据并按json格式返回
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 目的：php读取并操作本地xlsx格式的文件； 完整示例代码： 代码讲解：前端发起post网络请求，php接收一个name（姓名）的参数…
面向对象编程概念_如何向6岁的孩子解释面向对象的编程概念
面向对象编程概念by Alexander Petkov通过亚历山大佩特科夫(Alexander Petkov) Have you noticed how the same cliche questions always get asked at job interviews — over and over again?您是否注意到在求职面试中总是一遍又一遍地问同样的陈词滥调问题？ I…
jQuery 属性
jQuery 属性 方法描述context在版本 1.10 中被废弃。包含被传递到 jQuery 的原始上下文jquery包含 jQuery 的版本号jQuery.fx.interval改变以毫秒计的动画运行速率jQuery.fx.off对所有动画进行全局禁用或启用jQuery.support包含表示不同浏览器特性或漏洞的属性集（主…
mongodb的几种启动方法
1 mongodb的几种启动方法 启动Mongodb服务有两种方式，前台启动或者Daemon方式启动，前者启动会需要保持当前Session不能被关闭，后者可以作为系统的fork进程执行，下文中的path是mongodb部署的实际地址。1. 最简单的启动方式…
php 修改数据库表的字段的值
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 php 前端传递参数，遍历数据库表的字段后根据条件进行修改。 <?phpheader("Content-Type:text/html;charsetutf8"); header("Access-Control-Allow-Origin: *"); //解…
如何开始使用PostgreSQL
by Akul Tomar通过Akul Tomar 如何开始使用PostgreSQL (How to get started with PostgreSQL) PostgreSQL is an open source Relational Database Management System (RDBMS). In this article, I’ll provide an introduction to getting started with PostgreSQL. Here is …
Java中数组常见的几种排序方法！
数组的定义： int[] arr new int[5];int[] arr1 {1,2,3,4,5};long[] arr2 new long[6];String[] strs new String[5];Person[] ps new Person[5]; 数组的操作： int[] arr {45, 34, 53, 43};Arrays.sort(arr);System.out.println(Arrays.toString(ar…
oracle 如何预估将要创建的索引的大小
一.1 oracle 如何预估将要创建的索引的大小 oracle 提供了2种可以预估将要创建的索引大小的办法： ① 利用包 Dbms_space.create_index_cost 直接得到 ② 利用11g新特性 Note raised when explain plan for create index 下边分别举例说明。 一.2 环境说明 [ora…
删除对象的某个属性
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 实现代码： var data {a:1,b:2,c:3}for(var item in data){if (item b) {delete data[item];} }console.log(data:, data) 打印结果： data: {a: 1, c: 3}
java 学到什么实习_我如何获得外展实习机会以及到目前为止所学到的知识
java 学到什么实习by Nguedia Adele由Nguedia Adele 我如何获得外展实习机会以及到目前为止所学到的知识 (How I got my Outreachy internship and what I’ve learned so far) I recently got accepted for an Outreachy internship, working with LibreHealth.我最近接受了与…
STM32F103C8开发板原理图和管脚图
转载于:https://www.cnblogs.com/libra13179/p/6894335.html
js实用数组方法
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 判断是否为数组 1. Array.isArray([]) 2. var arr[1,2] arr instanceof Array -->true arr instanceof String -->false map ---- 返回数组得出的结果 const filtered [1, 2,…
BasicModal - 简单易用的现代 Web App 弹窗
BasicModal 是为现代 Web 应用程序打造的弹窗系统。它包括所有你需要显示的信息，问题或接收用户的输入。这里的弹窗还可以链接起来，所以你可以很容易地建立一个预定义顺序的安装帮助或显示对话框。无效输入可以使用包含突出显示和处理功能。 在线演示 …
javascript选择器_如何通过选择正确JavaScript选择器来避免沮丧
javascript选择器选择器如何影响代码的快速指南 (A quick guide on how selectors affect your code) While working on a project, I ran into an issue in my code. I was attempting to define multiple HTML elements into a collection and then change those elements ba…