根据反应文件,useEffect在重新运行useEffect部分之前将触发清理逻辑.
如果你的效果返回一个函数,React将在清理时运行它...
没有用于处理更新的特殊代码,因为
useEffect默认情况下处理它们.它会在应用下一个效果之前清除之前的效果......
然而,当我使用requestAnimationFrame和cancelAnimationFrame里面useEffect,我发现cancelAnimationFrame可能无法正常停止动画.有时,我发现旧动画仍然存在,而下一个效果会带来另一个动画,这会导致我的Web应用程序性能问题(特别是当我需要渲染繁重的DOM元素时).
我不知道反应钩子在执行清理代码之前是否会做一些额外的事情,这使得我的取消动画部分不能正常工作,会useEffect挂钩做像闭包这样的东西来锁定状态变量吗？
什么是使用效果的执行顺序及其内部清理逻辑？我在下面写的代码有什么问题,这使得cancelAnimationFrame不能完美地工作吗？
谢谢.
//import React, { useState, useEffect } from "react";
const {useState, useEffect} = React;
//import ReactDOM from "react-dom";
function App() {
const [startSeconds, setStartSeconds] = useState(Math.random());
const [progress, setProgress] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setStartSeconds(Math.random());
}, 1000);
return () => clearInterval(interval);
}, []);
useEffect(
() => {
let raf = null;
const onFrame = …