前端开发测试

这个功能拆开的话包括3个部分: 1. 圆弧形进度条 2. 进度条上的百分比, 3. 进度条上的刻度. 我使用了SVG来实现这个功能, SVG是一种基于XML的矢量图形格式, 可以用来描述二维图形和三维图形. 首先创建两个Path, 一个是进度条的底色, 一个是进度条的进度. 然后使用stroke-dasharray和stroke-dashoffset属性来实现进度条的百分比效果. 最后使用text元素来实现进度条上的刻度.

参考资料：

• SVG MDN DOCS
• SVG：理解stroke-dasharray和stroke-dashoffset属性

这个功能可以拆成2部分, 1. 椭圆的运动轨迹, 2. 点在椭圆上的运动. 我使用了SVG来实现这个功能, 先用Path画一个椭圆轨迹, 然后使用animateMotion来实现椭圆的运动轨迹,来实现点在椭圆上的运动.

参考资料：

• Mozilla path
• Mozilla animateMotion
• SVG里的几个动画元素的用法介绍

Redux是一个JavaScript状态容器, 提供可预测化的状态管理.Redux 的作用是把组件的状态提升到全局, 任何组件都可以访问到状态, 任何组件都可以修改状态.

Reudux是这样储存信息的:
1. 创建一个store, 2. 创建一个reducer, 3. 创建一个action, 4. 使用dispatch来触发action, 5. 使用subscribe来监听store的变化.
说明: 1. 使用 Redux 的 createStore 函数来创建一个包含应用程序状态的存储对象, 也就是Store,
2. reducer是一个函数, 它定义如何处理操作并更新存储的状态。
3. action是一个对象,定义表示如何更新存储状态的操作。
4, 我通常在React中使用React Hooks 来触发一个Action, 来完成一个状态的更新或者是一个异步操作.
5.异步操作的话还需要用到Redux-Saga,它是一个用于管理应用程序 Side Effect 的库, 也就是说它是用来处理异步操作的.