根据react文档,useEffect
在它重新运行useEffect
部分之前会触发清理逻辑。
如果你的 effect 返回一个函数,React 会在需要清理时运行它......
没有用于处理更新的特殊代码,因为
useEffect
默认情况下会处理它们。它在应用下一个效果之前清理以前的效果......
但是,当我使用requestAnimationFrame
and cancelAnimationFrame
inside 时useEffect
,我发现cancelAnimationFrame可能无法正常停止动画。有时,我发现旧的动画仍然存在,而下一个效果带来了另一个动画,这会导致我的 web 应用程序性能问题(尤其是当我需要渲染大量 DOM 元素时)。
不知道react hook在执行清理代码之前会不会做一些额外的事情,导致我的cancel-animation部分不能正常工作,useEffect
hook会不会做闭包之类的事情来锁定状态变量?
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 = () => {
const currentProgress = startSeconds / 120.0;
setProgress(Math.random());
// console.log(currentProgress);
loopRaf();
if (currentProgress > 100) {
stopRaf();
}
};
const loopRaf = () => {
raf = window.requestAnimationFrame(onFrame);
// console.log('Assigned Raf ID: ', raf);
};
const stopRaf = () => {
console.log("stopped", raf);
window.cancelAnimationFrame(raf);
};
loopRaf();
return () => {
console.log("Cleaned Raf ID: ", raf);
// console.log('init', raf);
// setTimeout(() => console.log("500ms later", raf), 500);
// setTimeout(()=> console.log('5s later', raf), 5000);
stopRaf();
};
},
[startSeconds]
);
let t = [];
for (let i = 0; i < 1000; i++) {
t.push(i);
}
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<text>{progress}</text>
{t.map(e => (
<span>{progress}</span>
))}
</div>
);
}
ReactDOM.render(<App />,
document.querySelector("#root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>