更新搜索参数而不导致页面重新渲染

Question

我有一个页面的渲染时间非常长，总共可能为 1 秒。在此页面上，我有一个手风琴，它是一个自定义组件（使用 React 18）。单击它会显示其他手风琴的下拉菜单，最终会出现一个链接。这是我们的支持页面。

我的主要问题是搜索参数。我最初只是通过自定义

useState

钩子处理“活动”状态，性能很好，因为更新它只会重新渲染自身和子级。但是，我需要将活动类别添加到网址中。

我正在使用 tanstack 路由器，它具有

navigate()

功能，并且能够轻松添加状态。然后我移动状态以从 URL 中获取

categories

以确定它是否处于活动状态。这会导致整个页面重新渲染，从而导致我单击下拉菜单和打开它之间有大约 1 秒左右的延迟。仅当我通过 URL 参数处理状态时才会出现这种滞后。

关于如何提高性能，同时保持状态和 URL 同步的任何想法。

    function toggleActive() {
        navigate({
            search: (prev) => {
                if (!prev.categories) return { categories: category.slug };
                const categories = prev.categories.split(',');
                if (categories.includes(category.slug)) {
                    return {
                        categories: categories
                            .filter((urlCategory) => urlCategory !== category.slug)
                            .filter((urlCategory) => !allChildSlugs.includes(urlCategory))
                            .join(',')
                    };
                } else {
                    categories.push(category.slug);
                    return { categories: categories.join(',') };
                }
            }
        });
    }

Answer 1

这通常发生在 React 和 NextJs 中，根据我的观察，这种路由更改通常在开发环境中需要更长的时间，尝试构建 React 应用程序并运行构建，与之前相比，它不会花费太多时间