创建桌面应用的新方式：Tauri + React

创建桌面应用的新方式：Tauri + React

欢迎阅读本文。如果你是程序员，你一定听说过 Electron.js，它被用于创建 WhatsApp、Slack、Skype、Discord 等桌面应用。但为什么我说 Tauri 是创建桌面应用的新方式呢？让我们深入探讨一下它的一些优缺点。

Electron 与 Tauri 对比：

性能

Tauri 设计得更轻量级且更快，因为它使用更少的内存和 CPU 资源。

安全性

Tauri 注重安全性，通过使用基于 Rust 的本地层而非基于 JavaScript 的层，旨在比 Electron 更加安全。

大小

Tauri 应用程序的二进制文件比 Electron 应用程序小，因为它使用 Rust 而非 JavaScript 和其他网络技术。

访问本地 API

由于使用了 Rust，Tauri 应用程序可以访问比 Electron 应用程序更多的系统级 API。

你可以查看下面的表格，全面比较 Tauri 和 Electron。

但仅靠比较还不够，我们需要实际查看代码。让我们分别在 Electron 和 Tauri 中用 React 创建一个基本的 Todo 应用，然后对比它们。

Electron 应用

要创建 Electron 应用，请使用以下命令和步骤：

yarn create vite

1. 项目名称：<输入项目名称>
2. 选择框架：选择 Others
3. 选择 create-electron-vite
4. 项目模板：React

进入 Electron 项目，使用 VSCode 打开并安装所有包

yarn install 
yarn add jotai

注意：我们使用 jotai 进行状态管理。

你可以使用以下命令启动 Electron 应用

yarn dev

你会看到如下的应用界面，

注意：由于我使用的是 Linux，所以应用的标题和图标有所不同。Windows 和 Mac 上会有所不同。

我清空了 App.tsx、App.css 和 index.css 文件，应用将会是空白的。

import './App.css'

function App() {

  return (
    <>

    </>
  )
}

export default App

现在，开始创建 Todo 应用。

我在 src 文件夹下创建了 Components 文件夹和 store 文件夹，并在其中创建了两个文件。

src
|-- Components
    |-- Input.tsx
    |-- TodoList.tsx
|-- store
    |-- store.ts

Input.tsx：用于输入框，允许我们输入待办事项。

TodoList.tsx：用于显示待办事项列表。

store.ts：用于创建全局存储。

//store.ts
import { atom } from "jotai";

export const inputDataStore = atom<String[]>([])

在这里，我们使用 jotai Atom 初始化存储，并指定其类型为字符串数组。

// Input.tsx
import { useAtom } from "jotai"
import { inputDataStore } from "../store/store"
import { useState } from "react"

const Input = () => {
  const [_, setData] = useAtom(inputDataStore)
  const [inputData, setInputData] = useState('')


  return (
    <div className="input-container">
        <input type="text" onChange={(e) => {
          setInputData(e.target.value)
        }} />
        <button onClick={() => {
          setData((el) => [...el, inputData])
        }}>
          Add Todo
        </button>
    </div>
  )
}

export default Input

在上述代码中，我创建了一个输入框和一个按钮，将输入框中的值添加到全局待办事项列表中。

// TodoList.tsx

import { useAtom } from 'jotai'
import { inputDataStore } from '../store/store'

const TodoList = () => {
  const [data] = useAtom(inputDataStore)

  return (
    <ul>
        {data?.map((item, index) => {
            return (
                <li key={index}>
                    {item}
                </li>
            )
        })}
    </ul>
  )
}

export default TodoList

以上代码表示待办事项列表，这些待办事项是在 Input.tsx 文件中输入的。

// App.tsx
import './App.css'
import Input from './Components/Input'
import TodoList from './Components/TodoList'

function App() {

  return (
    <div className='app-container'>
      <Input />
      <TodoList />
    </div>
  )
}

export default App

最后，将所有组件组合到 App.tsx 文件中。

构建 Electron 应用

要构建 Electron 应用，请运行以下命令。

yarn build

上述命令将构建代码并创建一个名为 release 的文件夹，其中包含根据你的操作系统运行的应用程序构建文件。

由于我运行的是 Linux，它为我创建了一个 AppImage，大小为 102.2 MB。

Tauri 应用

要创建 Tauri 应用，请使用以下命令和步骤：

yarn create tauri-app

1. 项目名称：<项目名称>
2. 标识符：<项目标识符>
3. 选择语言：Typescript / Javascript
4. 选择包管理器：yarn
5. 选择 UI 模板：React
6. 选择 UI 风味：Typescript

然后，你可以 cd 进入 Tauri 应用目录，根据你给项目起的名称。

cd <project_name>

安装所有包并添加 jotai 作为状态管理包。

yarn install
yarn add jotai

文件结构和代码库将与 React 项目相同。

要在本地运行项目，请使用以下命令

yarn tauri dev

它将会在你的操作系统上运行桌面应用程序。

要构建桌面应用程序，请运行以下命令。

yarn tauri build

考虑到 Tauri 应用使用相同的代码库和包，其大小仅为 30.8 KB。

作为状态管理包。

yarn install
yarn add jotai

文件结构和代码库将与 React 项目相同。

要在本地运行项目，请使用以下命令

yarn tauri dev

它将会在你的操作系统上运行桌面应用程序。

要构建桌面应用程序，请运行以下命令。

yarn tauri build

考虑到 Tauri 应用使用相同的代码库和包，其大小仅为 30.8 KB。