文件资源管理器全新设计：告别重复渲染，尽享高效管理

前端

2022-11-28 04:18:51

革新文件管理，提升效率：告别重复渲染的烦恼

文件管理的痛点

文件管理在现代生活中扮演着越来越重要的角色，无论是企业还是个人，高效地管理文件和数据都至关重要。然而，传统的文件管理系统往往存在着许多痛点，其中一个最让人头疼的问题就是重复渲染。

什么是重复渲染？

重复渲染是指在文件资源管理器中进行操作时，文件列表或文件夹结构会重新加载或刷新，导致明显的延迟和卡顿，严重影响用户的工作效率。

重复渲染的罪魁祸首

在传统的文件管理系统中，重复渲染问题十分常见，尤其是在以下情况下：

打开或关闭文件夹
复制或移动文件
删除文件
重命名文件
搜索文件
排序或过滤文件

当用户执行上述操作时，文件资源管理器需要重新加载或刷新文件列表或文件夹结构，从而导致重复渲染问题。

革新设计，告别烦恼

微软团队在最新版的文件资源管理器中重点解决了重复渲染的问题。通过将上下文分离，并实现上下文的读写分离，将上下文改变时触发的重新渲染收敛至消费组件，有效提高了文件管理的效率和流畅性。

新设计的优势

本次更新带来了以下优势：

无缝的操作体验： 无需等待文件列表或文件夹结构的加载，文件管理操作更加迅速和流畅。
更高的工作效率： 无需等待重复的渲染操作，用户可以专注于管理文件，提高工作效率。
更好的用户体验： 简化了文件管理流程，减少了用户等待的时间，带来了更愉悦的用户体验。

代码示例

// 传统的实现
function renderExplorer(context) {
  // 重新加载文件列表和文件夹结构
  loadFileList();
  loadFolderStructure();
}

// 新的设计实现
function renderExplorer(context) {
  // 分离上下文
  const { readContext, writeContext } = context;

  // 只重新加载受影响的部分
  if (readContext.hasChanged) {
    loadFileList();
  }

  if (writeContext.hasChanged) {
    loadFolderStructure();
  }
}