reactjs - useEffect 没有更新依赖值
问题描述
我有一个组件,我想动态编辑一些样式。当我进入组件时,我希望它顺利增长,当我离开时,我希望它顺利缩短。
这是我的代码:
const easing = 0.1;
const outScale = 0.6;
const inScale = 1;
let targetScale = outScale;
let elementScale = targetScale;
let innerScale = 1 / elementScale;
const [parentTransformStyle, setParentTransformStyle] = useState(
`scale(${elementScale})`
);
const [innerTransformStyle, setInnerTransformStyle] = useState(
`scale(${innerScale})`
);
const requestRef = useRef();
const onPointOverEvent = () => {
targetScale = inScale;
console.log("over", inScale, targetScale);
};
const onPointerOutEvent = () => {
targetScale = outScale;
console.log("out", outScale, targetScale);
};
const animate = () => {
console.log("animate", targetScale);
elementScale += (targetScale - elementScale) * easing;
innerScale = 1 / elementScale;
setParentTransformStyle(`scale(${elementScale})`);
setInnerTransformStyle(`scale(${innerScale})`);
requestAnimationFrame(animate);
};
useEffect(() => {
requestRef.current = requestAnimationFrame(animate);
return () => cancelAnimationFrame(requestRef.current);
}, []);
targetScale
当鼠标悬停在元素中以及鼠标离开元素时,应该更新该变量。
如果我在事件侦听器中打印该值,则该值是正确的。但是在animate
函数内部,它具有初始值。有人可以指出我所缺少的吗?
解决方案
有什么理由你不能使用 CSS 转换而不是自己做动画吗?
例子:
function MyComponent() {
const [innerTransformStyle, setInnerTransformStyle] = React.useState(
`scale(${0.6})`
);
const onPointOverEvent = () => {
setInnerTransformStyle(`scale(${1})`);
};
const onPointerOutEvent = () => {
setInnerTransformStyle(`scale(${0.6})`);
};
return (
<div className="parent">
<div className="element" style={{transform: innerTransformStyle}} onPointerOut={onPointerOutEvent} onPointerOver={onPointOverEvent}></div>
</div>
);
}
ReactDOM.render(<MyComponent/>, document.getElementById("app"));
.parent {
width: 100px;
height: 100px;
background-color: #f00;
}
.element {
width: 100px;
height: 100px;
background-color: #0f0;
transition: transform 1s;
}
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="app"></div>
推荐阅读
- laravel - 如何在 Laravel 5.4 中组合模型和按模型排序两个数据
- reactjs - Webpack+SemanticUI+React:进程未定义
- python - 在散列中使用 .digest()?
- c++ - c ++ CreateThread非静态成员没有特定成员名称
- php - 具有非原始类型提示参数的 Laravel API 端点
- excel - VBA range.formula 问题(LEN、RIGHT 和 LEFT)
- python - 无法在 python 脚本中运行 os.popen
- java - Java,groovy REST 客户端比 Postman 慢 30 倍以上
- vue.js - Axios 拦截器仅在页面重新加载后工作
- html - 使用后代选择器的响应式网站