蚊子
·
useState 与 requestAnimationFrame 实现的useAnimationFrame
原文中文，约4600字，阅读约需11分钟。
📝
内容提要
本文介绍使用 requestAnimationFrame 实现 state 变化，封装了 useAnimationFrame hook 和 <Progress /> 组件，控制进度变化更流畅。实现进度曲线变化需要推导公式。
🎯
关键要点
-
本文介绍使用requestAnimationFrame实现state变化，封装useAnimationFrame hook和<Progress />组件。
-
复习useInterval的实现，使用useInterval可以实现进度变化，但颗粒度不够细。
-
实现useAnimationFrame，使用requestAnimationFrame来控制进度变化，避免丢帧问题。
-
基于useAnimationFrame实现更多功能，如监听变化、手动控制进度等。
-
实现Progress组件，定义组件属性并控制进度前进。
-
使用useImperativeHandle暴露控制方法给父组件。
-
实现useProgress的hook，简化获取当前进度的过程。
-
总结了useState和requestAnimationFrame封装的useAnimationFrame的hook，提到三次贝塞尔曲线的复杂性。
🏷️
