React经典面试题之倒计时组件详解

目录
  • 闲聊
  • 倒计时组件——需求描述：
  • 问题
  • 最后

闲聊

关于面试大家常常吐槽：“面试造火箭，工作拧螺丝。”，从而表达了对工作内容和能力要求匹配不一的现状。

不排除有些公司想要探查候选人的技术上限或者说综合技术能力，希望得到一个可拓展性更高的人才。也有些公司是不知道如何筛选候选人，所以随便找了一些网上的面试题，各种原理，细枝末节的东西。不是说这些东西不好，但我觉得首要考察候选人是否能够胜任该岗位，同时他如果能懂原理，还有细节，那自然是锦上添花。

闲话聊完了，关于React我觉得能考察实际能力一道题：怎么实现一个倒计时组件。

倒计时组件——需求描述：

写一个函数式组件CountDown，设置一个传入最大值的属性，每一秒减一，直到为0。

问题

  • 怎么设计。
import { useState } from "react"
function CountDown({max = 10}){
  const [count,setCount] = useState(max)

  useEffect(()=>{
    if(count>0){
      setTimeout(()=>{
        setCount(count-1)
      },1000)
    }
  })
  return <h1>{count}</h1>
}
export default CountDown
  • 如果我在父级改变了prop后要重置计数怎么做呢？

我们再用一个useEffect去进行处理：

import { useState } from "react"
function CountDown({max = 10}){
  const [count,setCount] = useState(max)

  // 倒计时逻辑
  useEffect(()=>{
    if(count>0){
      setTimeout(()=>{
        setCount(count-1)
      },1000)
    }
  })

  // 重置计数
  useEffect(()=>{
    setCount(max)
  },[max])

  return <h1>{count}</h1>
}
export default CountDown
  • setTimeout可能会造成内存泄露我们怎么处理呢？

通过useEffect的返回函数处理。

import { useState } from "react"
function CountDown({max = 10}){
  const [count,setCount] = useState(max)

  // 倒计时逻辑
  useEffect(()=>{
    let timer = null;
    if(count>0){
      timer = setTimeout(()=>{
        setCount(count-1)
      },1000)
    }
    return ()=>{
      clearTimeout(timer)
    }
  })

  // 重置计数
  useEffect(()=>{
    setCount(max)
  },[max])

  return <h1>{count}</h1>
}
export default CountDown

最后

一个简简单单的组件还是包含了很多知识点的，不仅能够考察候选人的基础技术能力，还能考察他的一个逻辑思维能力。

到此这篇关于React经典面试题之倒计时组件的文章就介绍到这了,更多相关React倒计时组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React倒计时功能实现代码——解耦通用

    需求分析 需求 在某个页面中需要有一个倒计时的功能,倒计时 5 s,5s钟后跳转到新的界面 分析 首先是实现倒计时功能 其次是实现在每倒计时 1 s后页面上要执行 倒计时秒数变化的功能 最后是实现倒计时完成后 跳转到指定页面的功能 初版做法 代码 let waitTime = 5 class DemoPage extends React.Component { constructor(props) { super(props); this.state = { time: '', }; } com

  • React注册倒计时功能的实现

    一.React版本 16.4.1 二.具体代码如下 设置state属性 constructor(props){ super(props); this.state = { btnText:'获取验证码', seconds: 60, //称数初始化 liked: true //获取验证码文案 } } 2.倒计时 // 获取验证码 sendCode = () => { let siv = setInterval(() => { this.setState({ liked:false, seconds

  • 基于vue、react实现倒计时效果

    本文实例为大家分享了基于vue.react实现倒计时效果的具体代码,供大家参考,具体内容如下 Vue 方案一:俩个元素 HTML: <div id="example"> <button @click="send"> <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span> <span v-if="!sendMsgDisabled"

  • React经典面试题之倒计时组件详解

    目录 闲聊 倒计时组件——需求描述: 问题 最后 闲聊 关于面试大家常常吐槽:“面试造火箭,工作拧螺丝.”,从而表达了对工作内容和能力要求匹配不一的现状. 不排除有些公司想要探查候选人的技术上限或者说综合技术能力,希望得到一个可拓展性更高的人才.也有些公司是不知道如何筛选候选人,所以随便找了一些网上的面试题,各种原理,细枝末节的东西.不是说这些东西不好,但我觉得首要考察候选人是否能够胜任该岗位,同时他如果能懂原理,还有细节,那自然是锦上添花. 闲话聊完了,关于React我觉得能考察实际能力一道题

  • vue设计一个倒计时秒杀的组件详解

    简介: 倒计时秒杀组件在电商网站中层出不穷  不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的 核心思路: 1.时间不能是本地客户端的时间  必须是服务器的时间这里用一个settimeout代替 以为时间必须统一 2.开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内  参加活动按钮可以点击,并且参加过活动以后不能再参加, 3.在组件创建的时候 同步得到现在时间服务时间差,并且在这里边设置定时器,每秒都做判断看秒杀是否开始和结束, 4.在更新时间的函数中是

  • React三大属性之Refs的使用详解

    refs是React中用来取得某个JSX组件或者某个DOM中的一些状态值的时候,用来获取节点的方法.在React官方的解释中,它的适用范围如下: 管理焦点,文本选择或媒体播放. 触发强制动画. 集成第三方 DOM 库. React文档中再三强调,请不要过度使用refs,所以当我们可以用dom原生对象解决时,尽量不要使用refs 依照之前的写法,首先是给出类组件和函数组件中refs的写法 类组件 在类中,refs有三种方式,目前最常用的是回调的形式使用,分别进行演示 //直接定义refs,已废弃

  • React三大属性之props的使用详解

    上期讲了state,接下来讲讲props.props功能在于组件间通信(父子组件),首先说说在各种组件中的用法: 类组件 //父组件传值 class Father extends React.PureComponent{ render(){ return ( <Son value={"son"} /> ) } } class Son extends React.PureComponent{ render(){ return ( <div>this data is

  • React 三大属性之state的使用详解

    React中很多地方需要用到数据,这在React中被叫做状态,我们需要一个专门管理状态的方法,于是state相关的就诞生了.state应该被要求有两个基本功能,一,能够存储一定的值,从而能被react使用,二,能够再它改变的时候被React监听到并且重新渲染.这里分别介绍一下在类和函数组件中state的写法: 类组件 class ClassComponent extends React.Component{ constructor(props){ super(props) } //可写可不写 r

  • React路由拦截模式及withRouter示例详解

    React路由拦截模式及withRouter示例详解

    目录 一.路由拦截 二.路由模式 三.withRouter 一.路由拦截 在前面两篇 路由博客基础上,我们将ReactRouter.js的我的profile路由设置成路由拦截的: <Route path="/profile" render={() => isAuth() ? <Profile/> : <Redirect to="/login"></Redirect> }></Route> 新建Logi

  • react实现移动端二级路由嵌套详解

    react实现移动端二级路由嵌套详解

    页面效果展示 功能需求 根据下面不同的标题切换不同的页面,请求接口数据,渲染页面数据,点击左侧数据,进入详情页面,在右侧图片中点击返回返回左面页面 实现代码 我们用到了react中的router,首先我们要下载react的路由,命令是 react-router-dom@5 --save 路由5版本跟6版本使用语法上略有区别,现在使用较多的是5版本 我们首先在index.js文件中引入react路由,然后进行路由跳转 import { default as React } from 'react'

  • react中使用antd及immutable示例详解

    react中使用antd及immutable示例详解

    目录 一.react中使用antd组件库 二.Immutable 2.1 深拷贝和浅拷贝的关系 2.2 immutable优化性能方式 2.3 immutable的Map使用 2.4 immutable的List使用 2.5 实际场景formJS 三.redux中使用immutable 一.react中使用antd组件库 运行命令create-react-app antd-react创建新项目: 运行命令npm i antd安装: 使用: import React from 'react' im

  • React Native 的动态列表方案探索详解

    React Native 的动态列表方案探索详解

    目录 背景 技术方案介绍 内存 异常处理 未来规划 背景 时至2022,精细化运营已经成为了各大App厂商的强需求,阿里的 DinamicX.Tangram 大家应该都很熟悉了,很多App厂商也自研了一些类似框架,基于DSL的动态化方案虽然有性能上的一些优势,但是毕竟不是图灵完备,一些需要逻辑动态下发的需求实现成本偏高,或由于DSL本身限制无法实现,针对这个问题我们使用RN进行了一下探索尝试, 利用我们已经相对完善的RN基建,结合客户端列表能力低成本的实现了一套的动态化能力,同时兼顾一定的性能体

  • React事件处理和表单的绑定详解

    React事件处理和表单的绑定详解

    目录 一.事件处理 1.1 React事件 1.2 事件对象 1.3 事件传参 1.4 函数组件事件处理 二.表单 一.事件处理 1.1 React事件 React 元素的事件处理和 DOM 元素类似.但是有一点语法上的不同: React 事件绑定属性的命名采用驼峰式写法,而不是小写. 例如onclick属性应该写成onClick. 如果采用 JSX的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM 元素的写法).例如已经定义了一个名为handleClick的函数,应该这样调用:

随机推荐