Electron+React+七牛云实战跨平台桌面应用教程

前端开发

课程简介

这份资料解决什么问题，适合什么基础这份资料解决的是“跨平台桌面应用从零搭建到打包分发”的完整工程链路问题，核心围绕 Electron 作为主进程壳层、React 负责渲染层 UI 与状态管理、七牛云承担对象存储这一技术组合展开。它不是零散的 API 讲解，而是按照真实项目推进顺序编排：先搭 Electron 环境，再切入 React 基础与 Hook 体…

已有 0 人浏览发布 2026-10-03 更新 2026-10-03

这份资料解决什么问题，适合什么基础

这份资料解决的是“跨平台桌面应用从零搭建到打包分发”的完整工程链路问题，核心围绕 Electron 作为主进程壳层、React 负责渲染层 UI 与状态管理、七牛云承担对象存储这一技术组合展开。它不是零散的 API 讲解，而是按照真实项目推进顺序编排：先搭 Electron 环境，再切入 React 基础与 Hook 体系，接着做组件拆分与状态结构设计，最后处理打包构建与自动更新。适合已经掌握 JavaScript 基本语法、能看懂 ES6 模块化写法、但对桌面端进程模型和前端状态流尚未形成系统认知的开发者。如果你连函数组件和 props 都不熟，建议先补基础再对照这份资料实践；如果你已经写过完整 Electron 项目，这份资料更适合当作查漏补缺的工程参考，尤其是 IPC 通信和状态扁平化那几节。

建议先看哪几块，资料怎么配合练习

建议按资料的章节顺序推进，但重点先啃两块：第一块是 Electron 的进程与线程部分，主进程和渲染进程的职责划分、BrowserWindow 的创建参数、以及 IPC 通信和 remote 跨进程访问的边界，这是桌面端最容易踩坑的地方，很多 React 开发者习惯把所有逻辑塞进渲染进程，结果文件系统和原生 API 调用全报错；第二块是 React 的 useEffect 体系，尤其是需要清除的 Effect 和可控 effect 两节，这直接决定了后续状态层是否会内存泄漏。资料里关于自定义 Hook 和 HOC 缺点的讨论，建议结合实际代码自己写一遍，不要只看。练习时，先跟着把开发环境配通，Electron 和 React 的工程链路要能跑起来，再按组件拆分那一节把 UI 拆成独立单元，最后进入状态结构设计部分。状态那一章是这份资料的工程核心，Flatten State 的改造建议手写实现一遍，理解为什么要从嵌套结构拍平，以及数据处理行为如何与组件解耦。

学完能独立做什么，可复用模块在哪

对照实践完这份资料后，你应该能独立完成一个具备完整数据流的跨平台桌面应用：主进程负责窗口生命周期和原生能力，渲染层用 React 函数组件和 Hook 管理本地状态，通过 IPC 把文件操作委托给主进程，再把产物上传到七牛云做存储。可复用的模块主要集中在三处：一是主进程与渲染进程的 IPC 通信封装，可以直接搬到后续项目里做进程间消息总线；二是基于 useState 和 useEffect 抽出的自定义 Hook，适合作为通用数据获取和副作用管理的基础件；三是 Flatten State 的数据处理行为模式，这种把状态拍平、用不可变方式更新的写法，能直接迁移到任何中后台或桌面端项目。最后几章的打包和自动更新部分，建议作为工程化收尾，重点理解 pack 流程的调试思路和 release 发布机制，这样后续做自己的桌面产品时，从开发到分发的闭环就能自己跑通，而不是停留在能跑开发模式就停手。

课程目录

📁 3
3-7 自定义 Hook（一）【整理不易‖记得关注：CunWorKNotes】.mp4 [35.7 MB]
3-4 useEffect 不需要清除的 Effect【公重号：CunWorkNotes】.mp4 [15.3 MB]
3-8 HOC 的概念和缺点.mp4 [21.8 MB]
3-5 useEffect 闇€瑕佹竻闄ょ殑 Effect.mp4 [39.8 MB]
3-1 React 绠€浠嬪拰缂樿捣.mp4 [13.3 MB]
3-2 配置 React 开发环境1.mp4 [31.6 MB]
📁 2
2-2 进程和线程【更多精选‖公众号：CunWorknotes】 .mp4 [10.7 MB]
2-6 使用 IPC 进行通信.mp4 [48.4 MB]
2-4 创建 BrowserWindow【资源精选‖更多关注：CunworkNotes】.mp4 [54.7 MB]
2-7 使用 remote 实现跨进程访问.mp4 [22.4 MB]
2-3 主进程和渲染进程.mp4 [11.6 MB]
2-1 配置 Electron 开发环境.mp4 [24.8 MB]
2-5 进程间的通信.mp4 [21.1 MB]
📁 7
7-4 添加数据处理行为（一）.mp4 [109.8 MB]
7-2 分析应用数据流.mp4 [67.4 MB]
7-1 分析设计 State 结构.mp4 [13.2 MB]
7-8 修改 State 为 Flatten 结构编码.mp4 [85.5 MB]
7-6 添加新建文件流程逻辑.mp4 [95.9 MB]
7-3 给 App 组件添加状态.mp4 [93.2 MB]
7-5 添加数据处理行为（二）.mp4 [74.9 MB]
📁 4
4-4 配置开发环境（二）【优质资源‖关注：cunWorkNotes 解锁】.mp4 [64.5 MB]
4-2 将 UI 拆分成组件.mp4 [18.3 MB]
4-3 配置开发环境（一）【持续更新‖免费提供：CunworknoteS】.mp4 [22.1 MB]
4-5 文件结构和代码规范.mp4 [36.4 MB]
📁 12
12-1 安装 Electron builder.mp4 [26.4 MB]
12-9 自动更新第一部分 - 自动发布 release.mp4 [67.1 MB]
12-6 生成安装包.mp4 [68.6 MB]
12-10 自动更新第二部分 - 添加自动更新功能.mp4 [67.5 MB]
12-4 调试整个pack流程.mp4 [78.3 MB]
12-5 探究打包过程和生成文件内容.mp4 [35.4 MB]
12-7 Electron 打包体积优化第一部分- 质的飞跃.mp4 [50.0 MB]
12-3 添加配置文件.mp4 [65.6 MB]
12-11 自动更新 第三部分 - 本地调试自动更新功能.mp4 [53.3 MB]
12-8 Electron 打包体积优化第二部分-极限优化.mp4 [64.4 MB]
12-2 为生产环境 build 代码.mp4 [32.5 MB]
📁 11
11-10 完成全部文件同步到七牛云功能编码【持续更新‖免费提供：CunworknoteS】.mp4 [90.1 MB]
11-9 为应用添加 Loading 效果.mp4 [58.6 MB]
11-6 自动同步单个文件至七牛云（二）.mp4 [75.0 MB]
11-2 在设置窗口添加七牛云参数（二）.mp4 [51.5 MB]
11-4 动态修改菜单项.mp4 [60.0 MB]
11-7 自动下载云文件至本地（一）.mp4 [72.1 MB]
11-3 添加云同步菜单.mp4 [64.8 MB]
11-5 自动同步单个文件至七牛云（一）.mp4 [82.7 MB]
11-8 自动下载云文件至本地（二.mp4 [101.1 MB]
11-11 使用流程图和伪代码解决剩下需求.mp4 [54.0 MB]
11-1 在设置窗口添加七牛云参数（一）.mp4 [81.2 MB]
📁 5
5-6 FileList 组件开发（一）【整理不易‖记得关注：CunWorKNotes】.mp4 [78.6 MB]
5-4 为项目选择图标库.mp4 [74.2 MB]
5-2 FileSearch 组件（一）【持续更新‖免费提供：CunworknoteS】.mp4 [71.2 MB]
5-1 为项目选择样式库.mp4 [63.0 MB]
5-9 左侧收尾工作.mp4 [81.7 MB]
5-5 使用 PropTypes 进行类型检查.mp4 [44.8 MB]
5-8 第一个自定义 Hook - useKeyPress.mp4 [42.3 MB]
📁 6
6-1 TabList 需求和属性分析.mp4 [10.8 MB]
📁 8
8-4 在 App 中集成文件操作.mp4 [103.3 MB]
8-1 在 React 中使用 Nodejs.mp4 [31.1 MB]
8-8 由一个 Bug 引发的思考.mp4 [49.2 MB]
8-3 FS 模块使用 Promise 改造.mp4 [67.3 MB]
8-5 数据持久化解决方案.mp4 [31.1 MB]
8-2 FS 模块初试牛刀.mp4 [33.3 MB]
8-7 添加持久化数据逻辑代码.mp4 [34.5 MB]
📁 9
9-9 设置窗口解决方案和流程分析【持续更新‖免费提供：CunworknoteS】.mp4 [54.2 MB]
9-4 添加上下文菜单第二部分【整理不易‖记得关注：CunWorKNotes】.mp4 [73.6 MB]
9-3 添加上下文菜单（一）.mp4 [60.0 MB]
9-11 添加设置窗口编码（二）【资源精选‖更多关注：CunworkNotes】.mp4 [74.9 MB]
9-6 原生应用菜单简介.mp4 [31.7 MB]
9-2 导入文件对话框（二）.mp4 [132.6 MB]
9-10 添加设置窗口编码（一）.mp4 [94.6 MB]
9-1 导入文件对话框（一）.mp4 [110.4 MB]
9-7 添加原生应用菜单编码（一）.mp4 [82.3 MB]
9-5 添加上下文菜单最终实现.mp4 [100.3 MB]
9-8 添加原生应用菜单编码（二）.mp4 [87.4 MB]
📁 10
10-6 获得下载链接.mp4 [119.2 MB]
10-4 云文件操作类编码（一）.mp4 [90.0 MB]
10-3 初始七牛 SDK.mp4 [103.1 MB]
10-1 对象存储平台简介.mp4 [32.5 MB]
10-9 实现文件下载方法.mp4 [115.5 MB]
10-2 七牛云平台使用简介.mp4 [29.3 MB]
10-5 云文件操作类编码（二）.mp4 [106.9 MB]
10-8 stream 流的简单用法.mp4 [25.6 MB]
10-7 stream 流的概念.mp4 [24.0 MB]
📁 13
13-1 课程总结.mp4 [12.6 MB]
📁 1
1-1 学习本课程的收获以及案例展示（内附彩蛋）.mp4 [52.2 MB]
课件.zip [2.6 MB]