将生命周期方法添加到类中

在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要。

每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载

同样,每当 Clock 生成的这个 DOM 被移除的时候,我们也会想要清除定时器,这在 React 中被称为卸载

我们可以在组件类上声明特殊的方法,当组件挂载或卸载时,来运行一些代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body> <div id="example"></div>
<script type="text/babel">
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, zzw learning react tired!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
} class ClockZzw 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, zzw learning react tired!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
} ReactDOM.render(
<ClockZzw />,
document.getElementById('example')
);
</script> </body>
</html>

实例解析:

componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。

在组件输出到 DOM 后会执行 componentDidMount() 钩子,我们就可以在这个钩子上设置一个定时器。

this.timerID 为定时器的 ID,我们可以在 componentWillUnmount() 钩子中卸载定时器。

代码执行顺序:

  1. 当 <Clock /> 被传递给 ReactDOM.render() 时,React 调用 Clock 组件的构造函数。 由于 Clock 需要显示当前时间,所以使用包含当前时间的对象来初始化 this.state 。 我们稍后会更新此状态。

  2. React 然后调用 Clock 组件的 render() 方法。这是 React 了解屏幕上应该显示什么内容,然后 React 更新 DOM 以匹配 Clock 的渲染输出。

  3. 当 Clock 的输出插入到 DOM 中时,React 调用 componentDidMount() 生命周期钩子。 在其中,Clock 组件要求浏览器设置一个定时器,每秒钟调用一次 tick()

  4. 浏览器每秒钟调用 tick() 方法。 在其中,Clock 组件通过使用包含当前时间的对象调用 setState() 来调度UI更新。 通过调用 setState(),React 知道状态已经改变,并再次调用 render() 方法来确定屏幕上应当显示什么。 这一次,render() 方法中的 this.state.date 将不同,所以渲染输出将包含更新的时间,并相应地更新 DOM。

  5. 一旦 Clock 组件被从 DOM 中移除,React 会调用 componentWillUnmount() 这个钩子函数,定时器也就会被清除。

react篇章-React State(状态)-将生命周期方法添加到类中的更多相关文章

  1. Android零基础入门第75节:Activity状态和生命周期方法

    前面两期我们学习了Activity的创建和注册.以及启动和关闭,也学会了重写onCraete方法,这些知识在实际开发中远远不够,还需要学习了解更多. 生命周期就是一个对象从创建到销毁的过程,每一个对象 ...

  2. React之状态(state)与生命周期

    很多时候,我们的页面数据是动态的.所以,我们需要实时渲染页面: 一.用定时函数setInterval() 组件(输出当前时间): index.js: 这样每隔1秒页面就会重新渲染一次,这样传进去的时间 ...

  3. 玩转 React(五)- 组件的内部状态和生命周期

    文章标题总算是可以正常一点了-- 通过之前的文章我们已经知道:在 React 体系中所谓的 "在 JavaScript 中编写 HTML 代码" 指的是 React 扩展了 Jav ...

  4. React源码剖析系列 - 生命周期的管理艺术

    目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...

  5. React第二篇:组件的生命周期

    前言:因为生命周期是必须要掌握的,所以React的第二篇咱就写这. (版本:16.3.2) React的生命周期大致分为四个状态:分别是Mouting.Updating.Unmounting.Erro ...

  6. React 源码剖析系列 - 生命周期的管理艺术

    目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...

  7. react生命周期方法有哪些?

    react生命周期方法有哪些? React 16.3+ getDerivedStateFromProps:在调用render()之前调用,并在每次渲染时调用.需要使用派生状态的情况是很罕见的 comp ...

  8. React Native组件的结构和生命周期

    React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导 ...

  9. React 组件的生命周期方法

    React 组件的生命周期方法 按渲染顺序: 1: componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行. 2: componentDidMount() – 仅在第 ...

随机推荐

  1. 简单理解 NP, P, NP-complete和NP-Hard

    P是一类可以通过确定性图灵机(以下简称 图灵机)在多项式时间(Polynomial time)内解决的问题集合. NP是一类可以通过非确定性图灵机( Non-deterministic Turing ...

  2. 【BZOJ】4559: [JLoi2016]成绩比较 计数DP+排列组合+拉格朗日插值

    [题意]n位同学(其中一位是B神),m门必修课,每门必修课的分数是[1,Ui].B神碾压了k位同学(所有课分数<=B神),且第x门课有rx-1位同学的分数高于B神,求满足条件的分数情况数.当有一 ...

  3. 20155310 2016-2017-2 《Java程序设计》第六周学习总结

    20155310 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 4.1 Y86指令集体系结构 •有8个程序寄存器:%eax.%ecx.%edx.%ebx.% ...

  4. 上海支付宝终面后等了两周,没能收到offer却来了杭州淘宝的电话面试

    上上周一(14/12/22)上海支付宝hr终面 http://www.cnblogs.com/zhanghaoh/p/4178386.html 苦苦等了两周,没能如愿收到offer,却在今天等来了 杭 ...

  5. 【Nginx】 Nginx实现端口转发

    什么是端口转发 当我们在服务器上搭建一个图书以及一个电影的应用,其中图书应用启动了 8001 端口,电影应用启动了 8002 端口.此时如果我们可以通过 localhost:8001 //图书 loc ...

  6. 2018Java开发面经(持续更新)

    不要给自己挖坑!!!不要给自己挖坑!!!不要给自己挖坑!!!如果面试官只是问你了解xxx吗,如果不是很了解,就直接说不知道,不要说知道,不然面试官深问再不知道就印象很不好! 处女面送给了头条(北京)日 ...

  7. 安装Visual Studio Scrum 1.0过程模板

    近几年里,Scrum变成了相当流行的软件开发方法学.因为它轻量.可迭代且快速等优点,以致于在敏捷开发中极受欢迎.微软甚至将TFS2010自带的MSF Agile5.0过程模板做得像Scrum,开发者们 ...

  8. 高性能.NET MVC之QMVC!

    ASP.NET!这个词代表者一个单词Fat!因为他总是捆绑着太多的太多的类,太多太多的各种功能!你也许会用到,如果你反编译或阅读他们开源的源码,你会不会犹如在大海中找不到方向?不管是Web form ...

  9. Extjs 基础篇—— Function基础

    这里主要是JS的基础知识,也是深入理解Ext的基础.1.参数可变长,注意跟Java还是有一点区别的.例: 1.function getUser(name,age){ 2.alert("nam ...

  10. 不同Linux机器之间拷贝文件

    不同的Linux之间copy文件常用有3种方法: 第一种就是ftp,也就是其中一台Linux安装ftp Server,这样可以另外一台使用ftp的client程序来进行文件的copy. 第二种方法就是 ...