共计 1442 个字符，预计需要花费 4 分钟才能阅读完成。
因为我太深刻接触过 less,sass 之类的 css 预编译器，导致在应用 Material UI 的时候，刚应用这个 JSS 语法，有点不太习惯，所以花了点工夫钻研了一下预编译器的常识，我也写了一篇顺手笔记，然而因为内容较少，感觉干货并不是很多，遂放弃公布，导致文章断更了一天。
注释
一. 实现工夫的实时更新
当初我想实现一下工夫能够实时显示在屏幕的右上角。
首先必定会想到 Date() 这个对于工夫的办法，(不要记混 Data 和Date哦)，然而咱们都晓得，它间接输入的格局数据并不是咱们心愿失去的那些，而是这样的格局
咱们到 Utils(小工具) 文件夹下创立一个 dateUtils.js 的文件用来寄存咱们获取工夫的这个函数
用到对于工夫的办法，你首先须要取得工夫这个对象，Date()是一个构造函数，要想应用它外面的办法，就得 new 一个实例对象进去才能够。
为了代码看起来清晰，于是把年月日都空了一行。因为调用 date.getxxx() 办法会返回一个 number 类型的数据。
为了不便了解，我在控制台再次调用一下这个办法
留神：我调用 date.getMonth() 返回的是 number，为什么上面组合到一起却变成了string 呢？其实很简略，基础知识，当你应用 +运算符操作字符串类型的时候，js 会默认你在拼接字符串，所以主动应用了 toString 办法来拼接字符串。如果你把下面代码所有的空字符串删除，那么就相当于 number 类型的数据运算了。
别急，到这一步并没有完结，因为这外面有一个谬误，date.getMonth()这个办法会返回以后月份-1，当初的工夫是
所以调用这个办法它返回给我的是 3 月,
为什么？因为 getMonth 是从一个数组 [0,1,2,3,4,5,6,7,8,9,10,11] 里取值的，因为数组 index 是从 0 开始的，当初是 4 月，所以正好取到了 index 为 3 的值，也就是 3 月 (其中的起因能够去搜寻其它相干内容，不过意义不大，这是 JAVA 遗留下来个 js 的问题，你只须要记住即可)
所以咱们要在 getMonth() 前面加 1，能力获取正确的工夫。
OK，工夫有了，问题是它不会动啊，怎么办呢？
应用 useEffect
给以后工夫一个状态，并且每 1 秒调用 setNowTime() 这个函数，来实现与当初工夫的同步
或者 setInterval, 两种办法实现的成果是一样的。
因为我不会发 gif 图，截图都是动态的，所以就不截取效果图了，大略成果就是我的博客首页轮播图的成果，tips: 点击头像即可关上空调👉博客首页
二. 实现动静展现以后的目录
1. 引入之前咱们定义好的列表项的数组
还是用咱们比拟清真的 replace 办法.
const path = useLocation().pathname.replace('/dashboard/', "") const [pageName, setPageName] = useState(" 首页 ");
定义一个状态，用户进入首页必定是首页局部，因为这个咱们之前设置好了的<Navigate to='home'>
2. 这里逻辑也是比较简单的，首先查找以后门路是否和 item 的 key 相等，如果相等，就调用
其实这里也能够应用递归，但为了不便查看，还是认真写一下吧。
最初在 useEffect 里调用这个函数，第二个参数给 [path] 即可
三. 弹出退出登录对话框
这个性能简简单单的啦～，去 MaUI 复制一个 dialog 对话框组件
而后把咱们之前就编写好的 logOut 办法复制过去，引入相应的数据
把点击确定的回调函数改为 logOut 即可～