浏览器端直接读写本地文件到底有多爽

如果你在做那种需要处理大量本地文件的 Web 应用，比如在线代码编辑器、音频剪辑工具或者图像处理工具，那你一定经历过那种“用户体验灾难”：每次改个文件都要弹个上传框，或者还得不停地让用户重新选一遍文件夹。

我最近在翻一些前端工具库，发现 use-fs 出了 2.0 版本，这玩意儿解决了浏览器端文件操作的一个大痛点。它本质上是一个 React Hook，专门用来封装 File System Access API 和 OPFS（Origin Private File System）。

最让我觉得有点东西的地方在于它对 OPFS 的支持。以前我们用 File System API，虽然能操作用户本地文件，但权限管理极其繁琐，还得频繁触发用户授权。而 OPFS 相当于给每个网站提供了一个“私有文件库”，这个库是直接挂在你的域名下的，用户在自己的文件管理器里看不到，但你的 Web 应用可以像操作本地磁盘一样，在后台静默地读写、创建目录。

更关键的是，传统的 File System API 在 Safari 和 Firefox 上的支持非常拉胯，但 OPFS 在这些浏览器里表现很稳。这意味着你可以用一套逻辑，在全平台实现那种接近原生应用的存储体验，而不需要写一大堆兼容性补丁。

我试着把它的逻辑梳理了一下，如果你想在 React 项目里实现一个能监听文件夹变动的逻辑，代码大概长这样：

import { useFs } from 'use-fs';

function FileExplorer() {
  // 监听用户选定的目录，当文件增删改时，组件会自动重绘
  const { files, error, directoryHandle } = useFs('/my-project-dir');

  if (error) return <div>加载失败: {error.message}</div>;

  return (
    <ul>
      {files.map(file => (
        <li key={file.name}>{file.name}</li>
      ))}
    </ul>
  );
}

这套工作流的核心在于：它把原本极其复杂的异步文件操作，抽象成了一个响应式的状态。你只需要把 Hook 指向一个目录，它就会帮你监听整个目录树的变化。当用户在外面修改了文件，或者你的程序在后台写入了新数据，React 组件会立刻感知并更新 UI。这种“实时同步”的感觉，才是 Web 应用迈向桌面级体验的关键。

如果你正在折腾那种需要本地持久化存储、或者需要处理大型数据集的 Web 工具，把这个库加进你的 package.json 绝对不亏。