React Hooks 实现一个计时器组件
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 实现一个计时器组件的更多相关文章
- 使用react context实现一个支持组件组合和嵌套的React Tab组件
纵观react的tab组件中,即使是github上star数多的tab组件,实现原理都非常冗余. 例如Github上star数超四百星的react-tab,其在render的时候都会动态计算哪个tab ...
- 在React中写一个Animation组件,为组件进入和离开加上动画/过度
问题 在单页面应用中,我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果,为这么一个小功能引入第三方框架,实在有点小纠结.不如自己封装. 思路 原理 以进入时opacity: 0 --> ...
- 如何在react中实现一个倒计时组件
倒计时组件 import React, { Component } from 'react' import $ from 'jquery' import "../../css/spellTE ...
- react hooks 如何自定义组件(react函数组件的封装)
前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封 ...
- React Hooks 深入系列
本文基于近段时间对 hooks 碎片化的理解作一次简单梳理, 个人博客.同时欢迎关注基于 hooks 构建的 UI 组件库 -- snake-design. 在 class 已经融入 React 生态 ...
- React Hooks --- useState 和 useEffect
首先要说的一点是React Hooks 都是函数,使用React Hooks,就是调用函数,只不过不同的Hooks(函数)有不同的功能而已.其次,React Hooks只能在函数组件中使用,函数组件也 ...
- React Hooks使用避坑指南
函数组件比类组件更加方便实现业务逻辑代码的分离和组件的复用,函数组件也比类组件轻量,没有react hooks之前,函数组件是无法实现LocalState的,这导致有localstate状态的组件无法 ...
- 如何用 React Native 创建一个iOS APP?(三)
前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...
- React Hooks Typescript 开发的一款 H5 移动端 组件库
CP design 使用 React hooks Typescript 开发的一个 H5 移动端 组件库 English | 简体中文 badge button icon CP Design Mobi ...
随机推荐
- ADB 基本命令
ADB很强大,记住一些ADB命令有助于提高工作效率. 获取序列号: adb get-serialno 查看连接计算机的设备: adb devices 重启机器: adb reboot 重启到bootl ...
- 一键配置 github 可用的 hosts
最近发现访问 Github 各种不畅通, 静态资源经常加载不出来. 写了一个一键脚本修改本机 /etc/hosts 文件, 切换到可用的 IP (数据来自 https://gitee.com/xuew ...
- Bitter.Core系列八:Bitter ORM NETCORE ORM 全网最粗暴简单易用高性能的 NETCore 之 事务
Bitter.Core 编写事务相当简单,Bitter.Core 尽可能的将代码编写量降为最低,例外一方方面保证客户主观能控制代码.Bitter.Core 事务提交,支持Builkcopy事务,原生事 ...
- 使用jiffies的时间比较函数time_after、time_before
1. jiffies简介 首先,操作系统有个系统专用定时器(system timer),俗称滴答定时器,或者系统心跳. 全局变量jiffies取值为自操作系统启动以来的时钟滴答的数目,在头文件< ...
- C# 实现语音聊天
一.语音聊天说专业点就是即时语音,是一种基于网络的快速传递语音信息的技术,普遍应用于各类社交软件中,优势主要有以下几点: (1)时效性:视频直播会因为带宽问题有时出现延迟高的问题,而语音直播相对来说会 ...
- Javascript关键字,条件语句,函数及函数相关知识
关键字 条件语句 作用域 回调 关键字 根据规定,关键字是保留的,不能用作变量名或函数名. 下面是一些ECMAScript关键字的完整列表. break ,case,catch,continue,de ...
- Spring Boot中的静态资源文件
Spring Boot中的静态资源文件 1.SSM中的配置 2.Spring Boot 中的配置 2.1 整体规划 2.2 源码解读 2.3 自定义配置 2.3.1 application.prope ...
- juniper srx系列配置端口映射 转载
http://www.cnblogs.com/pinpin/p/9895815.html
- HTML字体
字体相关的样式 color 用来设置字体颜色 font-size 字体的大小 和font-size相关的单位 em 相当于当前元素的一个font-size rem 相当于根元素的一个font-size ...
- 基于Servlet体系的HTTP请求代理转发Spring Boot组件
背景概述 两个项目组原本都是各自负责两个产品线(产品A.产品B),由于公司业务的发展,目前需要将两个产品合并成一个大产品(功能整合,部分做取舍,最终产出产品C),前后端代码必然也需要整合,包括两个产品 ...