資訊專欄INFORMATION COLUMN
摘要：但我認(rèn)為談不上的毛病，而是編程模型和之間的一種模式差異。相比類，更貼近編程模型，使得這種差異更加突出。聲明本文采用循序漸進(jìn)的示例來解釋問題。本文假設(shè)讀者已經(jīng)使用超過一個(gè)小時(shí)。這是通過組件生命周期上綁定與的組合完成的。
本文由云+社區(qū)發(fā)表作者：Dan Abramov
接觸 React Hooks 一定時(shí)間的你，也許會(huì)碰到一個(gè)神奇的問題: setInterval 用起來沒你想的簡(jiǎn)單。
Ryan Florence 在他的推文里面說到：
不少朋友跟我提起，setInterval 和 hooks 一起用的時(shí)候，有種蛋蛋的憂傷。
老實(shí)說，這些朋友也不是胡扯。剛開始接觸 Hooks 的時(shí)候，確實(shí)還挺讓人疑惑的。
但我認(rèn)為談不上 Hooks 的毛病，而是 React 編程模型和 setInterval 之間的一種模式差異。相比類（Class），Hooks 更貼近 React 編程模型，使得這種差異更加突出。
雖然有點(diǎn)繞，但是讓兩者和諧相處的方法，還是有的。
本文就來探索一下，如何讓 setInterval 和 Hooks 和諧地玩耍，為什么是這種方式，以及這種方式給你帶來了什么新能力。
聲明：本文采用循序漸進(jìn)的示例來解釋問題。所以有一些示例雖然看起來可以有捷徑可走，但是我們還是一步步來。
如果你是 Hooks 新手，不太明白我在糾結(jié)啥，不妨讀一下 React Hooks 的介紹和官方文檔。本文假設(shè)讀者已經(jīng)使用 Hooks 超過一個(gè)小時(shí)。
代碼呢？通過下面的方式，我們可以輕松地實(shí)現(xiàn)一個(gè)每秒自增的計(jì)數(shù)器：
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 并不是內(nèi)置的 React Hook，而是我實(shí)現(xiàn)的一個(gè)自定義 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]);
}
（如果你在錯(cuò)過了，這里也有一個(gè)一樣的 CodeSandbox 線上示例）
我實(shí)現(xiàn)的 useInterval Hook 設(shè)置了一個(gè)計(jì)時(shí)器，并且在組件 unmount 的時(shí)候清理掉了。 這是通過組件生命周期上綁定 setInterval 與 clearInterval 的組合完成的。
這是一份可以在項(xiàng)目中隨意復(fù)制粘貼的實(shí)現(xiàn)，你甚至可以發(fā)布到 NPM 上。
不關(guān)心為什么這樣實(shí)現(xiàn)的讀者，就不用繼續(xù)閱讀了。下面的內(nèi)容是為希望深入理解 React Hooks 的讀者而準(zhǔn)備的。
哈？！文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/101899.html
摘要：在讀了一些文章后，大致是找到自己總是掉坑的原因了沒理解中的特性。通過這個(gè)示例，相信會(huì)比較容易地理解特性，并如何使用來暫時(shí)繞過它。在知道并理解這個(gè)特性后，有助于進(jìn)一步熟悉了的運(yùn)行機(jī)制，減少掉坑的次數(shù)。 由于剛使用 React hooks 不久，對(duì)它的脾氣還拿捏不準(zhǔn)，掉了很多次坑；這里的 坑 的意思并不是說 React hooks 的設(shè)計(jì)有問題，而是我在使用的時(shí)候，因?yàn)檫€沒有跟上它的理念導(dǎo)...
摘要：粟例說明一下獲取子組件或者節(jié)點(diǎn)的句柄指向已掛載到上的文本輸入元素本質(zhì)上，就像是可以在其屬性中保存一個(gè)可變值的盒子。粟例說明一下渲染周期之間的共享數(shù)據(jù)的存儲(chǔ)上述使用聲明兩個(gè)副作用，第一個(gè)每隔一秒對(duì)加，因?yàn)橹恍鑸?zhí)行一次，所以每二個(gè)參為空數(shù)組。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ React 新特性講解及實(shí)例(一) React 新特性 Hooks 講解及實(shí)...
摘要：用戶點(diǎn)擊改變?nèi)譅顟B(tài)崔然渲染整顆組件樹有沒有解決方案呢當(dāng)然有創(chuàng)建一個(gè)只接收的新組件，并將組件中的邏輯都移到組件中。最終的示例使用全局狀態(tài)和生成全局狀態(tài)和崔然完整示例見結(jié)論在和出現(xiàn)之前，缺乏自帶的全局狀態(tài)管理能力。 React 16.3 版本，正式推了出官方推薦的 context API —— 一種跨層級(jí)的數(shù)據(jù)傳遞方法。React 16.8 版本，推出了全新的 hooks 功能，將原本只...
摘要：比如就是一種，它可以用來管理狀態(tài)返回的結(jié)果是數(shù)組，數(shù)組的第一項(xiàng)是值，第二項(xiàng)是賦值函數(shù)，函數(shù)的第一個(gè)參數(shù)就是默認(rèn)值，也支持回調(diào)函數(shù)。而之所以輸出還是正確的，原因是的回調(diào)函數(shù)中，值永遠(yuǎn)指向最新的值，因此沒有邏輯漏洞。 1. 引言 如果你在使用 React 16，可以嘗試 Function Component 風(fēng)格，享受更大的靈活性。但在嘗試之前，最好先閱讀本文，對(duì) Function Com...
摘要：是流行的框架之一，在年及以后將會(huì)更加流行。于年首次發(fā)布，多年來廣受歡迎。下面是另一個(gè)名為的高階函數(shù)示例，該函數(shù)接受另外兩個(gè)函數(shù)，分別是和。將所有較小的函數(shù)組合成更大的函數(shù)，最終，得到一個(gè)應(yīng)用程序，這稱為組合。 React是流行的javascript框架之一，在2019年及以后將會(huì)更加流行。React于2013年首次發(fā)布，多年來廣受歡迎。它是一個(gè)聲明性的、基于組件的、用于構(gòu)建用戶界面的高...
閱讀 1531·2021-09-10 11:27
閱讀 2558·2019-08-30 15:53
閱讀 1440·2019-08-30 13:10
閱讀 3047·2019-08-30 11:09
閱讀 1200·2019-08-29 17:23
閱讀 727·2019-08-29 17:05
閱讀 3007·2019-08-29 15:10
閱讀 2411·2019-08-29 13:22
