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 ...
随机推荐
- 轻型目录访问协议 ldap 公司内部网站的登录 单点登录
https://zh.wikipedia.org/wiki/轻型目录访问协议 轻型目录访问协议(英文:Lightweight Directory Access Protocol,缩写:LDAP,/ˈɛ ...
- 数据湖-Apache Hudi
Hudi特性 数据湖处理非结构化数据.日志数据.结构化数据 支持较快upsert/delete, 可插入索引 Table Schema 小文件管理Compaction ACID语义保证,多版本保证 并 ...
- Python学习【第4篇】:元组魔法
template = "i am {name},age:{age}" v = template.format(**{"name":'xiaoxing',&quo ...
- 倍增小结 ST 与 LCA
倍增 倍增我是真滴不会 倍增法(英语:binary lifting),顾名思义就是翻倍. 能够使线性的处理转化为对数级的处理,大大地优化时间复杂度. (ps:上次学倍增LCA,没学会,老老实实为了严格 ...
- hadoop知识点总结(一)hadoop架构以及mapreduce工作机制
1,为什么需要hadoop 数据分析者面临的问题 数据日趋庞大,读写都出现性能瓶颈: 用户的应用和分析结果,对实时性和响应时间要求越来越高: 使用的模型越来越复杂,计算量指数级上升. 期待的解决方案 ...
- UI中的事件系统EventSystem
一.EventSystem简介 用于处理事件的分发和相应的系统,创建画布的同时会创建事件系统 二.UGUI实现事件系统的3种方式 1.使用组件eventTrigger(不推荐),拖动赋值 2.代码添加 ...
- 浅谈Webpack模块打包工具一
为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁 开发阶段把散的模块打包成一个模块 解决网络请 ...
- 2019牛客暑期多校训练营(第九场)D-Knapsack Cryptosystem(思维+子集和)
>传送门<题意:给你一个有n个元素的数组,一个sum,让你找到数组的子集使得子集元素和等于sum,保证只有一个解决方案. (其中1≤n≤36,0≤ sum<9*1018,0<a ...
- Codeforces Round #641 (Div. 2)
只写了A~D A - Orac and Factors 题意:f(n)就是n的第二小因数,问执行k次 n=f(n)+n 后的结果. 题解:如果一直找第二小的因子的话,1e9肯定得t.看下边样例解释就会 ...
- KMP——POJ-3461 Oulipo && POJ-2752 Seek the Name, Seek the Fame && POJ-2406 Power Strings && POJ—1961 Period
首先先讲一下KMP算法作用: KMP就是来求在给出的一串字符(我们把它放在str字符数组里面)中求另外一个比str数组短的字符数组(我们叫它为ptr)在str中的出现位置或者是次数 这个出现的次数是可 ...