摘要：但我认为谈不上的毛病，而是编程模型和之间的一种模式差异。相比类，更贴近编程模型，使得这种差异更加突出。声明本文采用循序渐进的示例来解释问题。本文假设读者已经使用超过一个小时。这是通过组件生命周期上绑定与的组合完成的。
本文由云+社区发表作者：Dan Abramov
接触 React Hooks 一定时间的你，也许会碰到一个神奇的问题: setInterval 用起来没你想的简单。
Ryan Florence 在他的推文里面说到：
不少朋友跟我提起，setInterval 和 hooks 一起用的时候，有种蛋蛋的忧伤。
老实说，这些朋友也不是胡扯。刚开始接触 Hooks 的时候，确实还挺让人疑惑的。
但我认为谈不上 Hooks 的毛病，而是 React 编程模型和 setInterval 之间的一种模式差异。相比类（Class），Hooks 更贴近 React 编程模型，使得这种差异更加突出。
虽然有点绕，但是让两者和谐相处的方法，还是有的。
本文就来探索一下，如何让 setInterval 和 Hooks 和谐地玩耍，为什么是这种方式，以及这种方式给你带来了什么新能力。
声明：本文采用循序渐进的示例来解释问题。所以有一些示例虽然看起来可以有捷径可走，但是我们还是一步步来。
如果你是 Hooks 新手，不太明白我在纠结啥，不妨读一下 React Hooks 的介绍和官方文档。本文假设读者已经使用 Hooks 超过一个小时。
代码呢？通过下面的方式，我们可以轻松地实现一个每秒自增的计数器：
import React, { useState, useEffect, useRef } from "react";
function Counter() {
let [count, setCount] = useState(0);
useInterval(() => {
// Your custom logic here
setCount(count + 1);
}, 1000);
return {count}
;
}
（CodeSandbox 线上示例）
上述 useInterval 并不是内置的 React Hook，而是我实现的一个自定义 Hook：
import React, { useState, useEffect, useRef } from "react";
function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback;
});
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
（如果你在错过了，这里也有一个一样的 CodeSandbox 线上示例）
我实现的 useInterval Hook 设置了一个计时器，并且在组件 unmount 的时候清理掉了。 这是通过组件生命周期上绑定 setInterval 与 clearInterval 的组合完成的。
这是一份可以在项目中随意复制粘贴的实现，你甚至可以发布到 NPM 上。
不关心为什么这样实现的读者，就不用继续阅读了。下面的内容是为希望深入理解 React Hooks 的读者而准备的。
哈？！文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/101899.html
摘要：在读了一些文章后，大致是找到自己总是掉坑的原因了没理解中的特性。通过这个示例，相信会比较容易地理解特性，并如何使用来暂时绕过它。在知道并理解这个特性后，有助于进一步熟悉了的运行机制，减少掉坑的次数。 由于刚使用 React hooks 不久，对它的脾气还拿捏不准，掉了很多次坑；这里的 坑 的意思并不是说 React hooks 的设计有问题，而是我在使用的时候，因为还没有跟上它的理念导...
摘要：粟例说明一下获取子组件或者节点的句柄指向已挂载到上的文本输入元素本质上，就像是可以在其属性中保存一个可变值的盒子。粟例说明一下渲染周期之间的共享数据的存储上述使用声明两个副作用，第一个每隔一秒对加，因为只需执行一次，所以每二个参为空数组。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ React 新特性讲解及实例(一) React 新特性 Hooks 讲解及实...
摘要：用户点击改变全局状态崔然渲染整颗组件树有没有解决方案呢当然有创建一个只接收的新组件，并将组件中的逻辑都移到组件中。最终的示例使用全局状态和生成全局状态和崔然完整示例见结论在和出现之前，缺乏自带的全局状态管理能力。 React 16.3 版本，正式推了出官方推荐的 context API —— 一种跨层级的数据传递方法。React 16.8 版本，推出了全新的 hooks 功能，将原本只...
摘要：比如就是一种，它可以用来管理状态返回的结果是数组，数组的第一项是值，第二项是赋值函数，函数的第一个参数就是默认值，也支持回调函数。而之所以输出还是正确的，原因是的回调函数中，值永远指向最新的值，因此没有逻辑漏洞。 1. 引言 如果你在使用 React 16，可以尝试 Function Component 风格，享受更大的灵活性。但在尝试之前，最好先阅读本文，对 Function Com...
摘要：是流行的框架之一，在年及以后将会更加流行。于年首次发布，多年来广受欢迎。下面是另一个名为的高阶函数示例，该函数接受另外两个函数，分别是和。将所有较小的函数组合成更大的函数，最终，得到一个应用程序，这称为组合。 React是流行的javascript框架之一，在2019年及以后将会更加流行。React于2013年首次发布，多年来广受欢迎。它是一个声明性的、基于组件的、用于构建用户界面的高...
阅读 1183·2021-09-10 11:27
阅读 2235·2019-08-30 15:53
阅读 1086·2019-08-30 13:10
阅读 2845·2019-08-30 11:09
阅读 938·2019-08-29 17:23
阅读 539·2019-08-29 17:05
阅读 2814·2019-08-29 15:10
阅读 2196·2019-08-29 13:22
