初识 | 启动项目 | idea | To be resolved | Finished | React 底层逻辑 | 独立组件库 | Link
官网：Electron
图标库：ionic
$ npm start // step 1
$ npm run estart // step 2业务层
- 路由
- 当前小组件化内容跳转
- 子组件路由跳转
- 封装公用函数
- 卫星导航
- 目录结构与分配
- 组件划分
- 模块划分
- 逻辑划分
- 逻辑函数处理
- 共用函数体处理以及特殊情况应用
- redux
- hook 机制
- history
- 算法
- 待续...
功能层
- 登录/注册模块
- 基本功能
- 登录信息验证
- 后台接口处理 & 前端输入数据处理
- 第三方信息验证
- 第三方登录/注册
- 验证码获取
- 短信验证
- 图像验证
- 用户守则
- 中英文切换
- 多语言
- 规则
- 中英文切换
- 欢迎界面 -> 过渡
- 目录模块
- 目录模块划分
- 聊天 -> 通讯
- 资讯
- 信息展示
- 传统新闻信息展示
- 卡片信息展示
- 超链接信息展示
- 信息展示
- 支付
- 接入第三方平台
- 绘图
- 二维
- 图表
- Rough
- Rough Charts
- React Rough
- chart.xkcd
- 引入 chart.xkcd
- 优化
- 有指向性的确定表格展示的方向，从而达到直观的展示效果
- 与后台建立链接，创建数据集合，确定前后端数据传递格式和方法
- 三维
- 二维
- Three
- 游戏
- 引擎
- 游戏类型、模块细化
- GIS
- 地图
- 第三方地图引入
- 百度地图
- 待开发...
- 百度地图
- 地图点位，点击后获取到位置坐标信息
- 地图选点
- 第三方地图引入
- 地图
- 第三方
- 特殊功能实现...
-
日历，用于记录一日常[此节点下所有开发暂停或取消]- 点击日历中的每一天出现弹框
- 数据处理
- 存新数据
- 编辑旧数据
- 数据处理
- 存数据
- 取数据
- 每一个日期可以点击记录，记录的信息录入后台数据库中
- 点击每个日期出现编辑菜单，进行信息录入，直接传递给后台
- 点击编辑时可执行添加、删除、修改的操作
- 日历有多种展示方式
- 通屏日历，可以随时点击一个出现编辑操作页
- 小日历，点击后右侧显示编辑操作页
- mdx-deck
- code-surfer
- code-hike
- 拖拽模块
- UI 库
- 待续...
网络层
- 实现简单后台数据连接
- fetch
- ajax
- axios
- 优化封装请求方式
- 垃圾数据收集与处理
- 请求安全问题
- 部分信息暴露（针对于PC层）
- 高数据量并发处理
- 中间层
- 待续...
数据层 - 网络安全
- 防御式编程思想
- 代码健壮性
- Single-SPA
- 错误日志输出
- 待续...
物理层
- Tree-Shaking
代码分支化开发
- 根据不同的功能进行分支创建
- 划分多个分支，每个分支进行单独的代码处理
- 多人团队合作模式
- 完成某个模块后进行 Code Review
- 提交 Commit 格式化
- 使用
git cz代替git commit
- 使用
- 不实现新打开窗口，只是在当前状态下进行界面跳转
- react 嵌入到 electron 中
- 以实现路由封装，但是未实现子级路由获取
- 默认指定第一个子路由
- 默认左侧第一项已选中
- 左侧文字信息消失问题
- 收缩左侧菜单栏的时候文字消失
- 当前方法待优化
- 使文字保持在居中位置
- 点击图标触发跳转事件
- 默认进入第一个子页面
- 多级路由切换问题未解决，需特殊考虑其他子层路由关系
- 多级路由的子路由数据传递
- 子路由的数据存储以及与父级之间的数据交换
- 重新定义视图，删除之前所有逻辑
- TypeScript
- 视图处理方式
- 处理过程分类
- 视图属性
- 视图数据集
- 独立数据集请求方法
- 并发请求 & 并发渲染
- 多图像之间的渲染不会受到影响
- Canvas 和 SVG 的区别
- 处理速度
- CPU 与 GPU 耗能
- electron
- 进程通讯
- ipMain
- ipcRenderer
- electron 打包发布
- Github Actions
- 进程通讯
- GUI 嵌入
- 待续...
- 实现 IPC 与主进程的交互功能，并实现新窗口的创建以及对应函数的响应操作
- 关闭当前打开窗口以及返回上一级时关闭当前窗口
- react 的 fetch 数据请求，目前传入的格式数据为 json
- DOM 渲染前获取后台数据信息
- 待续...
- forwardRef
- useImperativeHandle
- ref
- createRef & useRef
- useContext
- getPrefixCls
- getMergedStatus
- as
- interface
- extends
基于 Ant Design 的封装组件库，持续扩展中...
当前组件为页面必须使用组件，后期做非页面必须组件，持续扩展中...
- Form
- Input
- React-router路由模块化封装
React点击事件的两种写法- 30分钟精通React今年最劲爆的新特性——React Hooks
- svg之path详解
- React-Redux 中文文档
- ionic
- 最陌生的hooks: useImperativeHandle
- useCallBack,useMemo,forwardRef,useImperativeHandle用法总结
- 教你写一个 React 状态管理库
- 用TypeScript编写React的最佳实践
- React Class Component ref Antd Form resetFields
- 使用useRef解决useState异步更新数据导致更新不及时问题
- 前端拖拽事件解析-react实现拖拽效果demo