Electron React Boilerplate 系统信息获取：硬件信息与系统状态监控指南

2026-02-04 04:46:32作者：霍妲思

Electron React Boilerplate 是一个功能强大的桌面应用开发框架，结合了 Electron 的跨平台能力和 React 的现代化 UI 开发。对于开发者而言，获取系统信息和硬件状态是构建专业级应用的重要环节。本文将详细介绍如何在这个框架中实现系统信息获取功能，帮助您快速掌握硬件监控技术。✨

为什么需要系统信息监控？

在现代桌面应用中，系统信息获取不仅仅是技术需求，更是用户体验的关键。通过监控 CPU 使用率、内存占用、磁盘空间等关键指标，您的应用能够：

智能优化性能表现 🚀
及时预警系统资源不足
提供个性化的使用建议
增强应用的稳定性和可靠性

核心架构解析

Electron React Boilerplate 采用主进程-渲染进程分离架构，这正是系统信息获取的理想设计：

主进程模块 (src/main/main.ts)

负责与操作系统底层交互，通过 Electron 的 API 获取原始系统数据。这里定义了应用窗口创建、IPC 通信等核心功能。

渲染进程组件 (src/renderer/App.tsx)

使用 React 构建用户界面，通过 IPC 与主进程通信获取系统信息数据。

系统信息获取实战指南

第一步：扩展主进程功能

在主进程文件 src/main/main.ts 中，您可以添加专门处理系统信息请求的 IPC 监听器：

// 在主进程中添加系统信息获取功能
ipcMain.handle('get-system-info', async () => {
  return {
    platform: process.platform,
    arch: process.arch,
    cpuUsage: process.cpuUsage(),
    memoryUsage: process.memoryUsage(),
    uptime: process.uptime()
  };
});

第二步：渲染进程数据展示

在 React 组件中，您可以通过 IPC 调用获取系统信息，并以友好的方式展示给用户：

import { useEffect, useState } from 'react';

function SystemInfo() {
  const [systemInfo, setSystemInfo] = useState(null);

  useEffect(() => {
    window.electron.ipcRenderer.invoke('get-system-info')
      .then(info => setSystemInfo(info));
  }, []);

  return (
    <div className="system-info">
      <h2>📊 系统监控面板</h2>
      {systemInfo && (
        <div>
          <p>操作系统: {systemInfo.platform}</p>
          <p>CPU 架构: {systemInfo.arch}</p>
          <p>内存使用: {Math.round(systemInfo.memoryUsage.heapUsed / 1024 / 1024)} MB</p>
        </div>
      )}
    </div>
  );
}

第三步：硬件信息深度获取

除了基本的系统信息，您还可以获取更详细的硬件数据：

CPU 核心数：通过 os.cpus() 获取
内存总量：使用 os.totalmem() 统计
磁盘空间：通过 Node.js 文件系统 API 监控
网络状态：实时监测网络连接质量

最佳实践与性能优化

实时监控策略 ⚡

对于需要实时更新的系统信息（如 CPU 使用率、内存占用），建议采用轮询机制：

// 每 2 秒更新一次系统状态
useEffect(() => {
  const interval = setInterval(async () => {
    const info = await window.electron.ipcRenderer.invoke('get-system-info');
    setSystemInfo(info);
  }, 2000);

  return () => clearInterval(interval);
}, []);

错误处理与兼容性

考虑到不同操作系统的差异，您的代码应该包含完善的错误处理：

try {
  const systemInfo = await window.electron.ipcRenderer.invoke('get-system-info');
  // 处理获取到的信息
} catch (error) {
  console.error('获取系统信息失败:', error);
  // 显示用户友好的错误提示
}