React项目实现页面状态缓存(keep-alive)

  1. 下载插件
npm install react-activation -S -D
npm install umi-plugin-keep-alive -S -D
  1. 项目入口文件
import { KeepAlive, useAliveController } from 'umi'
 const { dropScope, clear } = useAliveController()
  <KeepAlive
         when // 组件卸载后缓存(离开页面时缓存)可以传入Boolean,array,function
         id={pathname} // 缓存多个页面时要有id
        name={pathname} // 页面的path地址
        saveScrollPosition="screen" // 可以记住页面的滚动位置,切换页面是回到上一次滚动的位置,可以设置为false
    >
        <Router />
  </KeepAlive>
  1. API
    clear() 清除所有路由缓存
    dropScope(key)清除某一个路由缓存
以下是修改后的代码: ``` import React, { useState } from 'react'; import DatePicker from 'react-mobile-datepicker'; import calendar from 'chinese-calendar'; const j = ['立春', '惊蛰', '清明', '立夏', '芒种', '小暑', '立秋', '白露', '寒露', '立冬', '大雪', '小寒']; const News = () => { const [endDate, setEndDate] = useState(new Date()); const handleConfirm = (date) => { const year = date.getFullYear(); const month = date.getMonth() + 1; const day = date.getDate(); const hour = date.getHours(); const minute = date.getMinutes(); const lunarDate = calendar.solar2lunar(year, month, day); const lunarMonth = lunarDate.lMonth; // 获取上个月、当月和下个月的节气 const prevJieQi = j[(lunarMonth + 10) % 12]; const currJieQi = j[lunarMonth % 12]; const nextJieQi = j[(lunarMonth + 2) % 12]; // 计算距离上个月、当月和下个月节气最近的日期 const prevJieQiDate = calendar.getPrevJieQi(year, prevJieQi); const currJieQiDate = calendar.getThisJieQi(year, currJieQi); const nextJieQiDate = calendar.getNextJieQi(year, nextJieQi); // 找到日期最接近的节气 let closestJieQiDate = prevJieQiDate; let diffInTime = date - prevJieQiDate; if (nextJieQiDate - date < diffInTime) { closestJieQiDate = nextJieQiDate; diffInTime = nextJieQiDate - date; } if (currJieQiDate - date < diffInTime) { closestJieQiDate = currJieQiDate; } setEndDate(closestJieQiDate); } return ( <div> <DatePicker value={endDate} onConfirm={handleConfirm} /> </div> ); } ``` 修改的思路: 1. 使用 `useState` Hook 定义 `endDate` 状态; 2. 在 `handleConfirm` 函数中,先计算当前选择的日期对应的农历日期,并获取当前月份的节气; 3. 然后通过 `calendar` 库提供的方法获取上个月、当月和下个月的节气日期; 4. 最后找到离当前选择日期最接近的节气日期,将其设为新的 `endDate` 值; 5. 在 `DatePicker` 中使用 `value` 属性绑定 `endDate` 状态,并在确认日期时触发 `handleConfirm` 函数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值