轻松拥有小程序_React倒计时功用完成代码——解耦通用

  • 栏目:公司新闻 时间:2021-01-05 10:54 分享新闻到:
<返回列表

React倒计时功能实现代码——解耦通用       这篇文章主要介绍了React倒计时功能实现——解耦通用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
其次是实现在每倒计时 1 s后页面上要执行 倒计时秒数变化的功能 最后是实现倒计时完成后 跳转到指定页面的功能

初版做法

代码

let waitTime = 5
class DemoPage extends React.Component {
 constructor(pro凡科抠图) {
 super(pro凡科抠图);
 this.state = {
 time: '',
 componentDidMount = () = {
 this.countDown();
 countDown = () = {
 if (waitTime 0) {
 waitTime--;
 this.setState({
 time:waitTime
 } else {
 history.push('/Login')
 return;
 setTimeout(() = {
 this.countDown();
 }, 1000);
 render() {
 todoInfo = this.state.time + '秒后跳转至登录界面';
 return (
 div 
 todoInfo
 /div 
export default DemoPage;

问题分析

时间设置为全局变量,糟糕的做法,

修改不方便 难于阅读和理解 全局变量的值极不安全,可能被任何程序修改

改进版

代码

class DemoPage extends React.Component {
 constructor(pro凡科抠图) {
 super(pro凡科抠图);
 this.state = {
 time: '',
 componentDidMount = () = {
 this.countDown(5);//倒计时时间可随意调整,且可读性强
 countDown = (waitTime) = {
 if (waitTime 0) {
 waitTime--;
 this.setState({
 time:waitTime
 } else {
 history.push('/Login')
 return;
 setTimeout(() = {
 this.countDown(waitTime);
 }, 1000);
 render() {
 todoInfo = this.state.time + '秒后跳转至登录界面';
 return (
 div 
 todoInfo
 /div 
export default DemoPage;

改进后将时间作为参数放到countDown里面,方便随意设置倒计时时间

进一步分析问题:

上面的做法,

setState的操作只能写在本组件,与本组件紧耦合在一起,无法实现多组件复用 history.push('/Login') 只能用在umi 框架中,与框架紧耦合在一起,无法实现普适应用

进一步改进

针对本问题的需求,可以将业务场景扩大为:

倒计时功能 倒计时过程中 需要做某事 doSomethingDuringCountDown() 倒计时结束后 需要做某事 doSomethingAfterCountDown()

这样的话,倒计时的功能就可以使用的更加的灵活了。

方案

将函数作为参数传递到countDown()方法中

将 doSomethingDuringCountDown() 和 doSomethingAfterCountDown()作为参数传递到countDown方法中,

具体的方法实现,根据自己页面的需求来实现。

代码

//utils.js
export countDown = (waitTime,doSomethingDuringCountDown,doSomethingAfterCountDown){
 if (waitTime 0) {
 waitTime--;
 if(doSomethingDuringCountDown){
 doSomethingDuringCountDown()
 } else {
 if(doSomethingAfterCountDown){
 doSomethingAfterCountDown()
 return;
 setTimeout(() = {
 countDown(waitTime,doSomethingDuringCountDown,doSomethingAfterCountDown);
 }, 1000);
}

实例

//DemoPage.jsx
import { countDown } from 'utils.js'
class DemoPage extends React.Component {
 constructor(pro凡科抠图) {
 super(pro凡科抠图);
 this.state = {
 time: '',
 componentDidMount = () = {
 countDown(5,this.waitTimeStateChange,this.linkTo);
 waitTimeStateChange = (time) = {
 this.setState({
 time: time,
 linkTo = () = {
 history.push(ToBeReviewedShowData.linkUrl)
 render() {
 todoInfo = this.state.time + '秒后跳转至登录界面'
 return (
 div 
 todoInfo
 /div 
export default DemoPage

总结

到此这篇关于React倒计时功能实现——解耦通用的文章就介绍到这了,更多相关React倒计时内容请搜索凡科以前的文章或继续浏览下面的

分享新闻到:

更多阅读

轻松拥有小程序_React倒计时功用完成代码

公司新闻 2021-01-05
React倒数计时作用完成编码——解耦通用性 本文关键详细介绍了React倒数计时作用完成—...
查看全文

广州凡科互联网科技股份有限公司招聘行

公司新闻 2021-01-04
招聘人数:8职位信息岗位要求:1、负责公司的会议管理工作;2、负责协助公司的企业文化活...
查看全文

公众号头图设计-WAP/微官网建设

公司新闻 2021-01-04
先在国,据工业生产和信息内容化部数据信息统计分析我国移动智能终端客户约14.77亿人,移...
查看全文
返回全部新闻


区域站点: 南丰县如何建立微信小程序   南宫市自己搭建服务器   囊谦县建立网站   南和县自助建站免费建站平台   南华县如何建立微信小程序   南江县自己搭建服务器   南京市建立网站   南靖县自助建站免费建站平台   南康市如何建立微信小程序   南乐县自己搭建服务器   南陵县建立网站   南宁市自助建站免费建站平台   南平市如何建立微信小程序   南皮县自己搭建服务器   南市区建立网站   南通市自助建站免费建站平台   南投县如何建立微信小程序   南雄市自己搭建服务器   南溪县建立网站   南阳市自助建站免费建站平台   南漳县如何建立微信小程序   南召县自己搭建服务器   南郑县建立网站   那坡县自助建站免费建站平台   那曲县如何建立微信小程序   纳雍县自己搭建服务器   讷河市建立网站   内黄县自助建站免费建站平台   内江市如何建立微信小程序   内丘县自己搭建服务器   内乡县建立网站   嫩江市自助建站免费建站平台   聂荣县如何建立微信小程序   尼玛县自己搭建服务器   尼木县建立网站   宁安市自助建站免费建站平台   宁波市如何建立微信小程序   宁城县自己搭建服务器   宁德市建立网站   宁都县自助建站免费建站平台   宁国市如何建立微信小程序   宁海县自己搭建服务器   宁化县建立网站   宁晋县自助建站免费建站平台   宁陵县如何建立微信小程序   宁明县自己搭建服务器   宁南县建立网站   宁强县自助建站免费建站平台   宁陕县如何建立微信小程序   宁武县自己搭建服务器   宁乡市建立网站   宁阳县自助建站免费建站平台   宁远县如何建立微信小程序   农安县自己搭建服务器   磐安县建立网站   盘锦市自助建站免费建站平台   盘山县如何建立微信小程序   磐石市自己搭建服务器   盘州市建立网站   蓬安县自助建站免费建站平台   澎湖县如何建立微信小程序   蓬莱市自己搭建服务器   彭山县建立网站   蓬溪县自助建站免费建站平台   彭阳县如何建立微信小程序   彭泽县自己搭建服务器   彭州市建立网站   偏关县自助建站免费建站平台   平安县如何建立微信小程序   平昌县自己搭建服务器   平定县建立网站   屏东县自助建站免费建站平台   平度市如何建立微信小程序   平果县自己搭建服务器   平和县建立网站   平湖市自助建站免费建站平台   平江县如何建立微信小程序   平乐县自己搭建服务器   平凉市建立网站   平利县自助建站免费建站平台   平罗县如何建立微信小程序   平陆县自己搭建服务器   屏南县建立网站   平泉市自助建站免费建站平台   屏山县如何建立微信小程序   平顺县自己搭建服务器   平塘县建立网站   平潭县自助建站免费建站平台   平武县如何建立微信小程序   萍乡市自己搭建服务器   平乡县建立网站   平阳县自助建站免费建站平台   平遥县如何建立微信小程序   平阴县自己搭建服务器   平邑县建立网站   平远县自助建站免费建站平台   平舆县如何建立微信小程序   皮山县自己搭建服务器   普安县建立网站   浦北县自助建站免费建站平台   浦城县如何建立微信小程序   普洱市自己搭建服务器   普格县建立网站   浦江县自助建站免费建站平台   普兰县如何建立微信小程序   普宁市自己搭建服务器   莆田市建立网站   迁安市自助建站免费建站平台   乾安县如何建立微信小程序   潜江市自己搭建服务器   潜山市建立网站  

友情链接: 自助免费建站 快速建站 360免费建站永久免 自助建站

Copyright © 2002-2020 建立网站_自助建站免费建站平台_如何建立微信小程序_自己搭建服务器_网站建设空间 版权所有 (网站地图) 备案号:粤ICP备10235580号