React hook中使用定时器setInterval及闭包问题的解决

1、首先定义timer

const timer= useRef();

2、在useEffect中做清除，以保证内存不被泄露

 useEffect(() => {
 	...
   return ()=> {
      clearInterval(timer.current);
    };
  }, );

3.在需要的部分使用定时器，直接调用state的数据后

timer.current = setInterval(() => {
      if (count<90) {
       setCount(count+1);
    } else {
        clearInterval(timer.current);
     }
     }, 300);

页面上的数据count变化只能从+1后就没有任何变化，查阅之后是由于闭包引起的，然后在外部增加一个全局变量i

let i=0；
const TestSetInterval = ({...}) => {
	const [count, setCount] = useState(0);
	
 	useEffect(() => {
 		...
   		return ()=> {
     		 clearInterval(timer.current);
    	};
 	 }, );
 
	...
	
	timer.current = setInterval(() => {
      	if (i<90) {
  	   	 i++;
       	 setCount(i);
   	 	} else {
        	clearInterval(timer.current);
     	}
     }, 300);
     
    ···
 }

页面上的count数值开始从1~90发生变化。
so 完美！