随着前端技术的发展，单页面应用（SPA）越来越流行，而 React Router 是用于构建 SPA 的常用库之一。然而，对于使用 React Router 实现的 SPA 应用，我们常常会遇到一个问题：路由跳转时页面会发生抖动，影响用户体验。本文将介绍这种抖动的原因，并提供一些有效的解决方案。
路由跳转时为什么会出现页面抖动？
在 SPA 应用中，页面上所有的组件都是由 JavaScript 动态生成的。当我们使用 React Router 进行路由跳转时，新的组件会在页面上被加载。这个过程中，新组件的 CSS 样式可能还未完全加载或解析，所以渲染出来的效果会出现抖动。
例如，假设我们有一个包含导航栏和内容区域的简单应用，导航栏和内容区域的高度和样式会根据所选路由不同而改变。以下是一个实现这个应用的简单代码示例：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------------- -- ------- ------ ---- - ---- ------------------
------ ---- ---- --------
------ ----- ---- ---------
------ ------- ---- -----------
----- --- - -- -- -
--------
-----
-----
----
--------- -----------------------
--------- -----------------------------
--------- ---------------------------------
-----
------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------
---------
-
------ ------- ---在这个应用中，当用户点击不同的导航链接时，应用会自动切换到相应的路由。不过，当两个不同路由之间的组件高度和样式不同时，页面就会出现抖动。这是因为当组件的高度和样式未完全加载时，页面会出现调整，导致呈现不连贯。
如何避免页面抖动？
1. 为页面添加样式
为页面添加样式可以防止页面抖动。当页面跳转到一个新的路由，新的组件被加载之前，我们可以在页面上添加一些占位样式。这些样式可以确保在新的组件到来之前，页面保持稳定。可以考虑为导航栏和内容区域添加统一的样式来避免抖动。
以下是一个例子，假设我们将导航栏固定在页面顶部，内容区域以 80 像素的间距显示在导航栏下方。则我们可以为导航条和内容区域添加一个固定高度，并为其设置一个相同的背景色和样式，例如：
-- -------------------- ---- ------- ---- - ----------------- -------- ------- ----- -- -------- ---- -- - -------- - ----------- ----- -- ------------ ---- --- -- ----------------- ----- ----------- ------ -- ----------- ----- -- -
这两个样式的高度和背景色都是固定的，所以在加载新的组件之前，它们会作为占位样式而存在。
2. 使用 React Transition Group
React Transition Group 是一个强大的动画库，可以很好地解决页面抖动问题。它提供了一个<CSSTransition>组件，可以在组件进入和离开时添加 CSS 动画。在使用 <CSSTransition>时，我们需要为每个不同的路由设置一个动画状态。当路由切换时，React 会自动为当前路由和下一个路由切换添加动画。
以下是一个例子，假设我们为<CSSTransition>设置了四种动画状态：appear,appear-active,enter,enter-active。这些状态对应的 CSS 样式分别对组件的透明度、宽度、高度等属性进行动画操作：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------------- -- ------- ------ ---- - ---- ------------------
------ - -------------- --------------- - ---- ------------------------
------ -----------
------ ---- ---- --------
------ ----- ---- ---------
------ ------- ---- -----------
----- --- - -- -- -
--------
-----
-----
----
--------- -----------------------
--------- -----------------------------
--------- ---------------------------------
-----
------
------ ---------- -------- -- -- -
-----------------
--------------
------------------
-----------------
-------------
-
---- --------------------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------
----------------
------------------
----
------
---------
-
------ ------- ---我们还需要在 CSS 文件中为这四种状态设置相应的样式。
-- -------------------- ---- ------- ------------ - -------- -- - ------------------------ - -------- -- ----------- ------- --- -------- - ----------- - -------- -- ------ -- ------- -- - ----------------------- - -------- -- ------ ----- ------- ----- ----------- ------- --- -------- ----- --- -------- ------ --- -------- -
在使用<CSSTransition>时，我们需要确保所添加的样式和组件的加载时机相同。在组件加载时，我们需要确保占位样式渲染。在组件加载完成时，我们才会为其添加 CSS 动画。
总结
当使用 React Router 实现 SPA 应用时，页面抖动是常见的问题之一。为了防止页面抖动，我们可以为页面添加样式或使用 React Transition Group 动画库。前者主要是在页面切换时为其添加占位样式来防止抖动。后者则是在组件加载时添加 CSS 动画进行过渡，并在组件加载完成时移除占位样式。无论哪种方法，都可以有效地提升用户体验，并增加你的应用的可用性。
最后，请注意，以上方法并不是唯一的解决方案，你可以根据你的具体使用场景和需求，选择适合的方法进行防抖动。希望这篇文章能够帮助你更好地学习和使用 React Router，以及提升你的 SPA 应用的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a43edc48841e98940ad19e