前言
Hooks出来已经有段时间了，相信大家都用过段时间了，有没有小伙伴们遇到坑呢，我这边就有个setInterval的坑，和小伙伴们分享下解决方案。
问题
写个count每秒自增的定时器，如下写法结果，界面上count为1？
function Counter() {
let [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => clearInterval(id);
}, []);
return <h1>{count}</h1>;
}
https://codesandbox.io/embed/hooks-setinterval-error-w4qu6
如果某些特定值在两次重渲染之间没有发生变化，你可以通知
React跳过对effect的调用。就是将第二个参数改成[],类似于更接近类组件的componentDidMount和componentWillUnmount生命周期，只执行一次。effect的第二个参数中传入的值就是 它更改的话，effect也会重新执行一遍的值。
因为Effect的第二个参数为[]，没有依赖,Effect只会执行一次。setInterval中拿到的是第一次渲染时的闭包count，所以count永远是0,界面会一直显示1,如下所示：
function Counter() {
let [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setCount(0 + 1);
}, 1000);
return () => clearInterval(id);
}, []);
return <h1>{count}</h1>;
}
那有些小伙伴会说，如果我们直接往第二个参数加count呢
function Counter() {
//...
useEffect(() => {
const id = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => clearInterval(id);
}, [count]);
//...
}
这样效果是对的，但是性能不好。每当count更改了，useEffect就会渲染一次,定时器也会不停的被新增与移除。如下所示：
//第一次
function Counter() {
//...
useEffect(() => {
const id = setInterval(() => {
setCount(0 + 1);
}, 1000);
return () => clearInterval(id);
}, [0]);
//...
}
//第二次
function Counter() {
//...
useEffect(() => {
const id = setInterval(() => {
setCount(1 + 1);
}, 1000);
return () => clearInterval(id);
}, [1]);
//...
//第N次
}
那到底要怎么做才能有保障性能，定时器只监听一次，又使定时器起作用呢？
方案一、函数式更新
useState 中的set方法可接收函数，该函数将接收先前的state，并返回一个更新后的值。这样定时器每次拿到的是最新的值。
function Counter() {
let [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setCount(v => {
return v + 1;
});
}, 1000);
return () => clearInterval(id);
}, []);
return <h1>{count}</h1>;
}
https://codesandbox.io/embed/hooks-setinterval-usestate-grres
方案二、用useRef
useRef返回一个可变的ref对象,返回的ref对象在组件的整个生命周期内保持不变。
将定时器函数提取出来，每次定时器触发时，都能取到最新到count.
function Counter() {
let [count, setCount] = useState(0);
const myRef = useRef(null);
myRef.current = () => {
setCount(count + 1);
};
useEffect(() => {
const id = setInterval(() => {
myRef.current();
}, 1000);
return () => clearInterval(id);
}, []);
return <h1>{count}</h1>;
}
https://codesandbox.io/embed/hooks-setinterval-useref-cgif3
思考：为什么不直接
setInterval(myRef.current, 1000)这样写不行呢,还要包个方法返回？function Counter() { let [count, setCount] = useState(0); const myRef = useRef(null); myRef.current = () => { setCount(count + 1); }; useEffect(() => { const id = setInterval(myRef.current, 1000); return () => clearInterval(id); }, []); return <h1>{count}</h1>; }https://codesandbox.io/embed/hooks-setinterval-useref-error-52dm0
下面的例子可以很好的解释。假如把myRef.current为cur变量,定时器的第一个参数为interval变量，cur变量更改，interval的取的还是之前赋值的值。
var cur=()=>{var count=0;console.log(count)};
var interval=cur;
var cur=()=>{var count=1;console.log(count)};
interval();//0
var cur=()=>{var count=0;console.log(count)};
var interval=()=>{cur()};
var cur=()=>{var count=1;console.log(count)};
interval();//1
方案三、自定义hook
可以写个自定义hook，方便重复使用。
function useInterval(fun) {
const myRef = useRef(null);
useEffect(() => {
myRef.current = fun;
}, [fun]);
useEffect(() => {
const id = setInterval(() => {
myRef.current();
}, 1000);
return () => clearInterval(id);
}, []);
}
function Counter() {
let [count, setCount] = useState(0);
useInterval(() => {
setCount(count + 1);
});
return <h1>{count}</h1>;
}
https://codesandbox.io/embed/hooks-setinterval-ownhooks-0tpxe
方案四、用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(() => {
const id = setInterval(() => {
dispatch({ type: "increment" });
}, 1000);
return () => clearInterval(id);
}, []);
return <h1>{state}</h1>;
}
https://codesandbox.io/embed/hooks-setinterval-usereducer-2byrm
还有什么好的方案欢迎小伙伴们留言评论～～
Happy coding .. :)
相关链接
https://zh-hans.reactjs.org/docs/hooks-effect.html
https://zh-hans.reactjs.org/docs/hooks-reference.html
https://overreacted.io/making-setinterval-declarative-with-react-hooks/