React Hooks与setInterval的坑怎么解决
这篇文章主要讲解了"React Hooks与setInterval的坑怎么解决"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"React Hooks与setInterval的坑怎么解决"吧！
一、需求
我们希望有一个每一秒自动+1的定时器
function Counter() { let [count, setCount] = useState(0); useEffect(() => { let id = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(id); }, [count]); return {count}
;}这种写法你会发现页面效果确实能出来，但是性能很差。每当 count 更改了， useEffect 就会渲染一次,定时器也会不停的被新增与移除。过程如下：
//第一次function Counter() {//... useEffect(() => { let id = setInterval(() => { setCount(0 + 1); }, 1000); return () => clearInterval(id); }, [0]);//...}//第二次function Counter() {//... useEffect(() => { let id = setInterval(() => { setCount(1 + 1); }, 1000); return () => clearInterval(id); }, [1]);//...//第N次}现在我们的需求是在实现功能的基础上，还要使得定时器只监听一次,保障它的性能很高。
二、解决方案
1、函数式更新
useState 中的set方法可接收函数，该函数将接收先前的 state ，并返回一个更新后的值。这样定时器每次拿到的是最新的值。
function Counter() {let [count, setCount] = useState(0);useEffect(() => { let id = setInterval(() => { setCount(v => { return v + 1; }); }, 1000); return () => clearInterval(id); }, []);return {count}
;}2、使用useRef
useRef 返回一个可变的 ref 对象,返回的 ref 对象在组件的整个生命周期内保持不变。
将定时器函数提取出来，每次定时器触发时，都能取到最新到 count .
function Counter() { let [count, setCount] = useState(0); const myRef = useRef(null); myRef.current = () => { setCount(count + 1); }; useEffect(() => { let id = setInterval(() => { myRef.current(); }, 1000); return () => clearInterval(id); }, []); return {count}
;}思考：为什么不直接像下面这个例子,将setInterval写成 setInterval(myRef.current, 1000)这样呢？为什么要通过一个函数返回？
//这个例子是错误的function Counter() { let [count, setCount] = useState(0); const myRef = useRef(null); myRef.current = () => { setCount(count + 1); }; useEffect(() => { let id = setInterval(myRef.current, 1000); return () => clearInterval(id); }, []); return {count}
;}定时器的第一个参数为 interval 变量，如果直接将myRef.current直接赋值给 interval 变量，那么之后的myRef.current的值改变之后，在这里依旧取到的是改变之前的值，因为ref的改变不会引起组件的重新渲染。
3、用useReducer
将 count 变量存入 reducer 中，使用 useReducer 更新 count
function reducer(state, action) { switch (action.type) { case "increment": return state + 1; default: throw new Error(); }}function Counter() { const [state, dispatch] = useReducer(reducer, 0); useEffect(() => { setInterval(() => { dispatch({ type: "increment" }); }, 1000); }, []); return {state}
;}4、自定义的hooks
自定义hook：useInterval
import React, { useState, useEffect, useRef } from 'react'; function useInterval(callback, delay) { const savedCallback = useRef(); // 保存新回调 useEffect(() => { savedCallback.current = callback; }); // 建立 interval useEffect(() => { function tick() { savedCallback.current(); } if (delay !== null) { let id = setInterval(tick, delay); return () => clearInterval(id); } }, [delay]);}使用useInterval：
function Counter() { let [count, setCount] = useState(0); useInterval(() => { // 你自己的代码 setCount(count + 1); }, 1000); return {count}
;}useInterval这个api的设计是非常巧妙的。
首先useInterval和setInterval接收的参数是一样的,这就降低了我们的学习成本
其次,useInterval的delay参数是可以动态调整的，而setInterval的delay参数是没有办法动态调整的
当
useIntervalHook 接收到不同 delay，它会重设 interval。声明一个带有动态调整 delay 的 interval，来替代写 添加和清除* interval 的代码 ——
useIntervalHook 帮我们做到了**。如果想要暂时暂停 interval ，那么可以像下面这个例子一样
const [delay, setDelay] = useState(1000); const [isRunning, setIsRunning] = useState(true); useInterval(() => { setCount(count + 1); }, isRunning ? delay : null);useInterval的delay也可以受控于另外一个useInterval
function Counter() { const [delay, setDelay] = useState(1000); const [count, setCount] = useState(0); // 增加计数器 useInterval(() => { setCount(count + 1); }, delay); // 每秒加速 useInterval(() => { if (delay > 10) { setDelay(delay / 2); } }, 1000); function handleReset() { setDelay(1000); } return ( <> Counter: {count}
Delay: {delay}
);}感谢各位的阅读，以上就是"React Hooks与setInterval的坑怎么解决"的内容了，经过本文的学习后，相信大家对React Hooks与setInterval的坑怎么解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！
