Electron：使用 React 作为 Renderer

前言

通过之前对 Electron 的了解，现在多少也能看出 Electron 的一些特点。

其中，Main Process 用来调度各个 Renderer Process；而各个 Renderer Process 实际上就是 web+(比 web 功能要强，姑且就允许我这么叫一次吧)，他们除了 web 应用本身所拥有的特征之外，还可以通过引入 Electron 来扩展，当然也可以使用 NodeJs 的特性，比如在 React 中使用 fs.writeFile()(听起来很诡异)。

如果之前的意见记不清楚了的话，可以再去翻翻看《Electron：Web 应用桌面化》、《Electron：主进程与渲染器进程》。

本篇呢，主要是为了来总结一下如何将 React 与 Electron 结合起来，让编码更加高效。

为什么要引入 React ？

实际上在最初学习的时候直接在 Electron 的应用中写 html+js+css 感觉也不错，但是当场景稍微复杂起来后就会感觉写起来比较繁琐。

另外还有就是在切换页面的场景，如果复用渲染器进程而直接采用切换 Url 的方式虽然也可以完成导航，但是会有一个“白屏时间”让人挺不舒服的。如果每个页面都起一个自己的渲染器进程，由于新窗口的启动有一个过渡，因此不会感觉到“白屏时间”，但是总感觉每个页面都起一个渲染器进程也并不是适用于任意位置。

所以说 SPA 是非常合适的一个选择，至于选什么框架并不重要。

最基础的整合

通过分别在 Electrn 中添加 React 和在 React 中添加 Electron 作比较之后，我发现在 React 中添加 Electron 仿佛要简单一些(也可能目前场景比较简单🤔)。

新建一个 React App

yarn create react-app electron-react

结束之后跑起来这个站点，假设站点地址是 http://localhost:3000，成功执行就可以了，保持这个执行状态不用关闭。

添加 Electron

yarn ad