审计日志筛选器
项目背景
随着公司业务的增长以及线上资源权限的增多，原有的日志筛选器无法支持让用户快速、精准的检索到自己需 要的日志，进行问题的溯源和排查 技术栈React16 / react-router / Antd4.7 / axios / webpack / lodash / EsLint / Less 技术难点1.新筛选器的参数结构设计复杂，加上需要兼容旧筛选器的参数 2.筛选器中数据量大的时候全部加载会导致卡顿 3.原有的公有SimpleTitle组件无法还原设计稿中的顶部页面布局 解决方案1.保证旧筛选器的参数结构和逻辑不变，将新筛选器参数的时间和搜索参数放到url路径上 2.对筛选器的数据进行分页，滚动到底部时自动请求下一页数据渲染，同时展示一个Spin组件作为加载中提示 3.对公有组件进行封装，在内部调整布局后导出一个私有组件服务日志模块，实现100%还原设计稿
项目收获锻炼了基本的业务能力，熟练掌握了React常用的hooks如useEffect、useState、useMemo和useCallback 等，学会了对数据进行分页，以及滚动请求分页数据的方法，学会了封装组件的基本方法