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. JavaScript 实现排序算法

    参考文章: 十大经典排序算法动画,看我就够了! 1. 冒泡排序 思路 比较所有相邻元素,如果第一个比第二个大,则交换它们 一轮下来,可以保证最后一个数是最大的 执行n-1轮,就可以完成排序 代码 Ar ...

  2. 提供个HDFS的目录的路径,对该目录进行创建和删除操作。创建目录时,如果目录 文件所在目录不存在则自动创建相应目录;删除目录时,由用户指定当该目录不为空时是否还删 除该目录

    import java.io.IOException; import java.util.Scanner; import org.apache.hadoop.fs.*; public class G_ ...

  3. Share Memory By Communicating 一等公民

    Share Memory By Communicating - The Go Programming Language https://golang.google.cn/doc/codewalk/sh ...

  4. loj10153二叉苹果树

    有一棵二叉苹果树,如果数字有分叉,一定是分两叉,即没有只有一个儿子的节点.这棵树共 N 个节点,标号 1 至 N,树根编号一定为 1. 我们用一根树枝两端连接的节点编号描述一根树枝的位置.一棵有四根树 ...

  5. Excel通配符

    数据科学交流群,群号:189158789 ,欢迎各位对数据科学感兴趣的小伙伴的加入!

  6. vscode 刚安装运行cnpm命令报错

    平时的开发工具什么都用,最近手贱把vscode卸载掉了,然而重新安装时,自已以前的什么配置都没了~~~~~~,又开始从头搞起,但是一切安装配置完毕,执行cnpm命令时报错,晕!!!!!! 解决办法:执 ...

  7. msf+cobaltstrike联动(一):把msf的session发给cobaltstrike

    前提:MFS已经获取到session,可以进入metepreter,现在需要使用cobaltstrike进行图形化管理或团队协作. cobaltstrike起一个beacon监听,如使用:window ...

  8. Java链表(英雄增删查改)

    链表(Linked List)介绍 链表是有序的列表,但是它在内存中是存储如下 小结: 1.链表是以节点的方式来存储,是链式存储. 2.每个节点包含 data 域, next 域:指向下一个节点. 3 ...

  9. Pytest(14)pytest.ini配置文件

    前言 pytest配置文件可以改变pytest的运行方式,它是一个固定的文件pytest.ini文件,读取配置信息,按指定的方式去运行 查看pytest.ini的配置选项 pytest -h 找到以下 ...

  10. 用werkzeug实现一个简单的python web框架

    使用工具 Pycharm , Navicat , WebStorm等 使用库 Werkzeug用于实现框架的底层支撑,pymysql用于实现ORM,jinja2用于模板支持,json用于返回json数 ...