营业时间组件的设计与React实现方案
1. 为什么需要营业时间组件在电商、本地生活、O2O等互联网产品中营业时间展示是个看似简单却暗藏玄机的功能点。我做过一个餐饮SaaS项目商家后台配置的营业时间曾导致30%的客户投诉——问题就出在时间格式混乱和跨天营业的特殊场景处理上。一个合格的营业时间组件需要解决多时段配置如餐厅午市11:00-14:00晚市17:00-21:30跨天营业处理如酒吧20:00-次日3:00国际化时区适配实时状态显示正在营业/已打烊2. 组件设计核心思路2.1 数据结构设计用JSON数组存储时段配置是行业通用做法const businessHours [ { day: 1, // 周一 periods: [ { start: 09:00, end: 12:00}, { start: 13:30, end: 18:00} ] }, // ...其他日期 ]关键细节时间建议用24小时制字符串存储避免AM/PM转换的本地化问题2.2 跨天营业的特殊处理遇到结束时间小于开始时间如23:00-02:00时组件内部需要做日期进位计算// 判断是否跨天 const isOvernight endTime startTime // 计算剩余营业时长 if(isOvernight) { const endDate new Date(1970-01-02 ${endTime}) // ...时间差计算逻辑 }3. React实现方案3.1 基础组件结构推荐使用Compound Components模式BusinessHours BusinessHours.Config value{hours} onChange{handleChange} / BusinessHours.Display hours{hours} timezoneAsia/Shanghai / /BusinessHours3.2 核心hooks封装封装useBusinessHours Hook处理核心逻辑function useBusinessHours(initialHours) { const [hours, setHours] useState(initialHours); // 校验时间格式 const validatePeriod (period) { if(period.start period.end) { throw new Error(结束时间必须晚于开始时间); } }; return { hours, setHours, validatePeriod }; }4. 企业级功能扩展4.1 节假日特殊配置通过overrideDates字段支持特殊日期配置{ regularHours: [...], overrideDates: { 2023-10-01: [], // 国庆节休业 2023-12-25: [{ start: 18:00, end: 24:00}] // 圣诞节延长营业 } }4.2 实时状态计算根据当前时间返回营业状态function getCurrentStatus(hours, timezone) { const now new Date(); const tzNow utcToZonedTime(now, timezone); return hours.some(day day.periods.some(p isWithinInterval(tzNow, { start: setTime(now, p.start), end: setTime(now, p.end) }) ) ) ? OPEN : CLOSED; }5. 性能优化方案5.1 时间计算缓存使用memoization优化高频调用const getDayHours useMemo( () memoize((day) hours.find(h h.day day)), [hours] );5.2 Web Worker处理复杂时区计算放入Web Workerconst worker new Worker(./timezoneWorker.js); worker.postMessage({ hours, timezone });6. 测试要点6.1 边界用例23:59-00:01的跨天场景夏令时/冬令时切换日闰秒处理需mock Date对象6.2 视觉回归测试超长时段列表的滚动测试阿拉伯语RTL布局适配高对比度模式下的可读性7. 实际踩坑记录时区陷阱某次上线后发现海外门店显示时间全部错乱原因是服务器默认UTC时间。解决方案// 明确指定时区 dayjs.tz.setDefault(America/New_York);iOS日期解析问题Safari不支持new Date(2023-01-01)格式必须改为new Date(2023/01/01)性能卡顿在渲染500门店列表时出现滚动卡顿最终通过虚拟滚动和Web Worker方案解决这个组件我们最终封装成了公司内部物料累计接入68个业务线。关键点在于把业务规则如最小营业时长30分钟和显示逻辑彻底解耦通过props注入不同行业的特殊校验规则。
