React Hooks 实现一个计时器组件

useEffect

https://reactjs.org/docs/hooks-reference.html#useeffect


import React, { useState, useEffect } from "react";
import "./style.css"; const App = () => {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setTimeout(() => {
const counter = count + 1;
setCount(counter);
}, 1000);
return () => clearTimeout(timer);
}, [count]);
// useEffect(() => {
// const timer = setTimeout(() => {
// const counter = count + 1;
// setCount(counter);
// }, 1000);
// return () => clearTimeout(timer);
// }, []);
// once bug
// 观察值,如果是 [] 空数组,组件只会渲染一次,因为没有监听到任何值发生的变化
return (
<section>
<div>count = {count}</div>
</section>
);
}; export default App;

useCallback

Returns a memoized callback


const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],// 观察值,如果是 [] 空数组,组件只会渲染一次,因为没有监听到任何值发生的变化
);

https://reactjs.org/docs/hooks-reference.html#usecallback


useMemo

Returns a memoized value.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

const memoizedValue = useMemo(() => {
return computeExpensiveValue(a, b);
}, [a, b]);

https://reactjs.org/docs/hooks-reference.html#usememo



React Hooks

optimize performance / 优化性能

useMemo and useCallback hooks usage guide to increasing the performance of our applications

refs

https://stackblitz.com/edit/react-hooks-useeffect-timer?file=src%2FApp.js

https://stackblitz.com/edit/react-hooks-usememo-timer?file=src%2FApp.js



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


React Hooks 实现一个计时器组件的更多相关文章

  1. 使用react context实现一个支持组件组合和嵌套的React Tab组件

    纵观react的tab组件中,即使是github上star数多的tab组件,实现原理都非常冗余. 例如Github上star数超四百星的react-tab,其在render的时候都会动态计算哪个tab ...

  2. 在React中写一个Animation组件,为组件进入和离开加上动画/过度

    问题 在单页面应用中,我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果,为这么一个小功能引入第三方框架,实在有点小纠结.不如自己封装. 思路 原理 以进入时opacity: 0 --> ...

  3. 如何在react中实现一个倒计时组件

    倒计时组件 import React, { Component } from 'react' import $ from 'jquery' import "../../css/spellTE ...

  4. react hooks 如何自定义组件(react函数组件的封装)

    前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封 ...

  5. React Hooks 深入系列

    本文基于近段时间对 hooks 碎片化的理解作一次简单梳理, 个人博客.同时欢迎关注基于 hooks 构建的 UI 组件库 -- snake-design. 在 class 已经融入 React 生态 ...

  6. React Hooks --- useState 和 useEffect

    首先要说的一点是React Hooks 都是函数,使用React Hooks,就是调用函数,只不过不同的Hooks(函数)有不同的功能而已.其次,React Hooks只能在函数组件中使用,函数组件也 ...

  7. React Hooks使用避坑指南

    函数组件比类组件更加方便实现业务逻辑代码的分离和组件的复用,函数组件也比类组件轻量,没有react hooks之前,函数组件是无法实现LocalState的,这导致有localstate状态的组件无法 ...

  8. 如何用 React Native 创建一个iOS APP?(三)

    前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...

  9. React Hooks Typescript 开发的一款 H5 移动端 组件库

    CP design 使用 React hooks Typescript 开发的一个 H5 移动端 组件库 English | 简体中文 badge button icon CP Design Mobi ...

随机推荐

  1. FreeWheel核心业务团队混沌工程实践之路

    https://mp.weixin.qq.com/s/0monDPkAlMk7Yhq9swW7gQ 原创 郭彦梅 InfoQ 2020-11-17  

  2. 阿里云弹性公网IP那些事 阿里云云栖号 6月1日 弹性公网IP是独立的公网IP资源,可以绑定到阿里云专有网络VPC类型的ECS、NAT网关、私网负载均衡SLB上,并可以动态解绑,实现公网IP和ECS、NAT网关、SLB的解耦,满足灵活管理的要求。阿里云弹性公网IP那些事 阿里云云栖号 6月1日 弹性络VPC类型的E

    阿里云弹性公网IP那些事 阿里云云栖号 6月1日 弹性公网IP是独立的公网关.私网负载均衡SLB上,并可以动态解绑,实现公网IP和ECS.NAT网关.SLB的解耦,满足灵活管理的要求.

  3. Springboot中mybatis控制台打印sql语句

    Springboot中mybatis控制台打印sql语句 https://www.jianshu.com/p/3cfe5f6e9174 https://www.jianshu.com/go-wild? ...

  4. java的几种对象(PO,VO,DAO,BO,POJO)

    一.PO persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数 ...

  5. Html5 部分快捷键

    1:Tab键,快速创建标签 2:ctrl+d,删除光标所在行 3; ctrl+/ 快速添加注释 ctrl+shirt+/ 快速添加多行注释,在js里分别为添加单行注释和多行注释 4; ctrl+alt ...

  6. Redis-设置Key的过期时间及相关策略

    Redis-设置Key的过期时间及相关策略 1.设置key的过期时间 1.1expire key second:设置key的过期时间(秒) 1.2ttl key:查看key的有效期 1.3persis ...

  7. IDEA插件及相关使用技巧

    IDEA插件及相关使用技巧 一.插件 图片背景插件background Image Plus 翻译插件Translation CodeGlance右侧显示代码 Grep Console自定义设置控制台 ...

  8. spark SQL (四)数据源 Data Source----Parquet 文件的读取与加载

    spark SQL Parquet 文件的读取与加载 是由许多其他数据处理系统支持的柱状格式.Spark SQL支持阅读和编写自动保留原始数据模式的Parquet文件.在编写Parquet文件时,出于 ...

  9. 通过spring statemmachine 自定义构建属于自己的状态机(两种方式)

    spring 的stateMachine 相对于当前的版本,还是比较新颖的,但是对于合适的业务场景,使用起来还是十分的方便的.但是对于官网提供的文档,讲解的是十分的精简,要想更深入的了解其内部架构,只 ...

  10. KVM之XFS磁盘扩容

    1.前言 根据目前我们使用的需求,以前规划的100G磁盘空间不够,这里将演示XFS文件系统的扩容,因为我使用的是KVM所以也会演示KVM的扩容方式. 2.KVM磁盘扩容 扩容前一定要先备份,或者做快照 ...