facebook / facebook/docusaurus

Avoid layout unmount/remount

未关闭
#2,891 3 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
difficulty: advanced domain: performance proposal
主要语言
TypeScript
星标
66.2k
派生
10k
平均合并
1 天 3 小时
30 天内合并 PR
52

描述

## 🐛 Bug Report

Most classic D2 sites will use the same layout component on every single page, apart from a few rare exceptions (like a code playground implemented with a custom page).

When navigating from one page to the other, the layout should not unmount/remount unnecessarily.

Currently, when navigating from the home page to the /docs page, the layout unmounts/remounts.

The only case I found where it does not unmount/remount is when navigating from one doc to another.

Avoiding unmounts/remounts when possible is important for 2 reasons:
- faster transition from one page to another
- avoid resetting state of the layout

Probably not urgent to work on this, just wanted to backlog it somewhere :)

Useful link: https://www.gatsbyjs.org/packages/gatsby-plugin-layout/

## To Reproduce

```
yarn docusaurus swizzle @docusaurus/theme-classic Navbar
```

Add this button somewhere in the navbar:

```
const TestButton = () => {
const [bool, setBool] = useState(false);
return (
setBool((b) => !b)}>Toggle me {String(bool)}
);
};
```

![image](https://user-images.githubusercontent.com/749374/83901615-59486280-a75b-11ea-8f68-e95f458c70df.png)

## Expected behavior

Navigating should not reset the button state

## Actual Behavior

The button state is reset

---

Edit: this is also a problem for our mobile drawer that may not animate properly on all page transitions, see https://github.com/facebook/docusaurus/discussions/11063#discussioncomment-12763738

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。