React项目中如何实现一个简单的锚点目录定位

你的名字 2024-04-22 19:22 49阅读 0赞

![在这里插入图片描述][392ccc53ba5743a6a75fd2448049a828.jpeg]

### 小册 ###

> 这是我整理的学习资料，非常系统和完善，欢迎一起学习

*  **[现代JavaScript高级小册][JavaScript]**
 *  **[深入浅出Dart][JavaScript]**
 *  **[现代TypeScript高级小册][JavaScript]**
 *  **[linwu的算法笔记?][linwu]**

### 前言 ###

锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节

*  如何在React中实现锚点定位和平滑滚动
 *  目录自动高亮的实现思路
 *  处理顶部导航遮挡锚点的解决方案
 *  服务端渲染下的实现方案
 *  性能优化策略

### 实现基本锚点定位 ###

> 首先,我们需要实现页面内基本的锚点定位功能。对于锚点定位来说,主要涉及这两个部分:

1.  设置锚点,为页面中的某个组件添加id属性
2.  点击链接,跳转到指定锚点处

![20210106205503299.gif][]  
例如:

// 锚点组件
    function AnchorComponent() {
      return <h2 id="anchor">This is anchor</h2> 
    }
    
    // 链接组件
    function LinkComponent() {
      return (
        <a href="#anchor">Jump to Anchor</a> 
      )
    }

当我们点击`Jump to Anchor`这个链接时,页面会平滑滚动到`AnchorComponent`所在的位置。

#### 使用useScrollIntoView自定义hook ####

React中实现锚点定位,最简单的方式就是使用[useScrollIntoView][]这个自定义hook。

import { useScrollIntoView } from 'react-use';
    
    function App() {
    
      const anchorRef = useRef();  
      const scrollToAnchor = () => {
        useScrollIntoView(anchorRef);
      }
    
      return (
        <>
          <a href="#anchor" onClick={scrollToAnchor}>
            Jump to Anchor  
          </a>
          
          <h2 id="anchor" ref={anchorRef}>This is anchor</h2>
        </>
      )
    }

useScrollIntoView接受一个ref对象,当调用这个hook函数时,会自动滚动页面,使得ref对象在可视区域内。

#### 原生scrollIntoView方法 ####

useScrollIntoView内部其实就是使用了原生的scrollIntoView方法,所以我们也可以直接调用:

function App() {
    
      const anchorRef = useRef();
    
      const scrollToAnchor = () => {
        anchorRef.current.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        })
      };
    
      return (
        <>  
          <a href="#anchor" onClick={scrollToAnchor}>Jump to Anchor</a>
          <h2 id="anchor" ref={anchorRef}>This is anchor</h2> 
        </>
      )
    
    }

scrollIntoView可以让元素的父容器自动滚动,将这个元素滚动到可见区域。behavior:'smooth’可以启用平滑滚动效果。

### 锚点定位和目录联动 ###

> 很多时候,我们会在页面中实现一个目录导航,可以快速定位到各个章节。此时就需要实现锚点定位和目录的联动效果:

*  点击目录时,自动滚动到对应的章节
 *  滚动页面时,自动高亮正在浏览的章节

#### 目录导航组件 ####

目录导航本身是一个静态组件,我们通过props传入章节数据:

function Nav({ chapters }) {
      return (
        <ul className=" chapters">
          {chapters.map(chapter => (
            <li key={chapter.id}>
              <a href={'#' + chapter.id}>  
                {chapter.title}
              </a>
            </li>
          ))}
        </ul>
      )
    }

#### 锚点组件 ####

然后在页面中的每一章使用Anchor组件包裹:

function Chapter({ chapter }) {
      return (
        <Anchor id={chapter.id}>  
          <h2>{chapter.title}</h2>
          {chapter.content}
        </Anchor>
      )
    }
    
    function Anchor({ children, id }) {
      return (
        <div id={id}>
          {children}  
        </div>
      )
    }

这样通过id属性建立章节内容和目录链接之间的关联。

#### 处理点击事件 ####

当点击目录链接时,需要滚动到对应的章节位置:

function App() {
    
      //...
    
      const scrollToChapter = (chapterId) => {
        const chapterEl = document.getElementById(chapterId);
        chapterEl.scrollIntoView({ behavior: 'smooth' });
      }
    
      return (
        <>
          <Nav 
            chapters={chapters}
            onLinkClick={(chapterId) => scrollToChapter(chapterId)} 
          />
          
          {chapters.map(chapter => (
            <Chapter 
             key={chapter.id}
             chapter={chapter}
            />
          ))}
        </>
      )
    }

给Nav组件传一个onLinkClick回调,当点击链接时,通过chapterId获取到元素,并滚动到可视区域,实现平滑跳转。

#### 自动高亮 ####

实现自动高亮也很简单,通过监听滚动事件,计算章节元素的偏移量,判断哪个章节在可视区域内,并更新active状态:

通过getBoundingClientRect可以得到元素相对于视窗的位置信息,根据位置判断是否在可见区域内,如果是就更新activeChapter状态,从而触发目录的高亮效果。

### 问题解析 ###

#### 遮挡问题 ####

有时锚点会被固定的Header遮挡,此时滚动会定位到元素上方,用户看不到锚点对应的内容。

常见的解决方案是:

1.  设置锚点元素margin-top

#anchor {
        
      margin-top: 80px; /* header高度 */
    }

直接设置一个和Header高度相同的margin,来防止遮挡。

1.  在滚动方法中加入offset

// scroll offset
    const scrollOffset = -80; 
    
    chapterEl.scrollIntoView({
        
      offsetTop: scrollOffset
    })

给scrollIntoView传入一个顶部偏移量,这样也可以跳过Header的遮挡。

#### 响应式问题 ####

在响应式场景下,目录的遮挡问题会更复杂。我们需要区分不同断点下,计算匹配的offset。

可以通过MatchMedia Hook获取当前的断点:

import { useMediaQuery } from 'react-responsive';
    
    function App() {
    
      const isMobile = useMediaQuery({ maxWidth: 767 });
      const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1023 });
      const isDesktop = useMediaQuery({ minWidth: 1024 });
      
      let scrollOffset = 0;
    
      if (isMobile) {
        scrollOffset = 46; 
      } else if (isTablet) {  
        scrollOffset = 60;
      } else if (isDesktop) {
        scrollOffset = 80;
      }
    
      const scrollToChapter = (chapterId) => {
        const chapterEl = document.getElementById(chapterId);
    
        chapterEl.scrollIntoView({
          offsetTop: scrollOffset  
        })
      }
    
      //...
    
    }

根据不同断点,动态计算滚动偏移量,这样可以适配所有情况。

### 性能优化 ###

#### 使用节流 ####

滚动事件会高频触发,直接在滚动回调中计算章节位置会造成性能问题。

我们可以使用Lodash的throttle函数进行节流:

import throttle from 'lodash.throttle';
    
    const handleScroll = throttle(() => {
        
      // 计算章节位置
    }, 100);

这样可以限制滚动事件最多每100ms触发一次。

#### IntersectionObserver ####

使用IntersectionObserver提供的异步回调,只在章节进入或者离开可视区域时才执行位置计算:

import {
         useRef, useEffect } from 'react';
    
    function App() {
        
    
      const chaptersRef = useRef({
        });
    
      useEffect(() => {
        
        const observer = new IntersectionObserver(
          (entries) => {
        
            // 章节进入或者离开可视区域时更新
          }
        );
    
        chapters.forEach(chapter => {
        
          observer.observe(
            document.getElementById(chapter.id)  
          );
        })
    
      }, []);
    
    }

这种懒加载式的方式可以大幅减少无效的位置计算。

### SSR支持 ###

在Next.js等SSR场景下,客户端脚本会延后加载,页面初次渲染时目录联动会失效。

#### getInitialProps注水 ####

可以在getInitialProps中提前计算目录数据,注入到页面中:

Home.getInitialProps = async () => {
        
    
      const chapters = await fetchChapters();
    
      const mappedChapters = chapters.map(chapter => {
        
        return {
        
          ...chapter,
          highlighted: isChapterHighlighted(chapter) 
        }
      });
    
      return {
        
        chapters: mappedChapters
      };
    
    };

#### hydrate处理 ####

客户端脚本加载后,需要调用ReactDOM.hydrate而不是render方法,进行数据的补充填充,避免目录状态丢失。

import {
         useEffect } from 'react';
    
    function App({
          chapters }) {
        
    
      useEffect(() => {
        
        ReactDOM.hydrate(
          <App chapters={
        chapters} />,  
          document.getElementById('root')
        );
      }, []);
    
    }

### 服务端渲染的实现方案 ###

![image.png][]

在使用了服务端渲染(SSR)的框架如Next.js等情况下,实现锚点定位和目录联动也会有一些不同。

主要区别在于:

*  服务端和客户端环境不统一
 *  脚本加载时间差

这会导致一些状态错位的问题。

#### 问题复现 ####

假设我们有下面的目录和内容结构:

function Nav({ chapters }) {
      return (
        <ul>
          {chapters.map(ch => (
            <li>
              <a href={'#' + ch.id}>{ch.title}</a>
            </li>
          ))}
        </ul>
      )
    }
    
    function Chapter({ chapter }) {
    
      const ref = useRef();
    
      // 占位组件
      return <div ref={ref}>{chapter.content}</div> 
    }
    
    function App() {
    
      const chapters = [
        { id: 'chapter-1', title: 'Chapter 1' },
        { id: 'chapter-2', title: 'Chapter 2' },
      ];
    
      return (
        <>
          <Nav chapters={chapters} />
    
          <Chapter chapter={chapters[0]} />
          <Chapter chapter={chapters[1]} />
        </>
      )
    
    }

非SSR环境下,点击链接和滚动都可以正常工作。

但是在Next.js的SSR环境下就会有问题:

**点击目录链接时,页面不会滚动。**

这是因为在服务端,我们无法获取组件的ref,所以锚点元素不存在,自然无法定位。

**滚动页面时,目录高亮也失效。**

服务端渲染的静态HTML中,并没有绑定滚动事件,所以无法自动高亮。

#### 预取数据 ####

首先,我们需要解决点击目录链接的问题。

既然服务端无法获取组件ref,那就需要在客户端去获取元素位置。

这里有两个方法:

1.  组件挂载后主动缓存元素位置

// Chapter组件
    
    useEffect(() => {
      // 缓存位置数据
      cacheElementPosition(chapter.id, ref.current); 
    }, []);
    
    // Utils
    
    const elementPositions = {};
    
    function cacheElementPosition(id, element) {
      const rect = element.getBoundingClientRect();
    
      elementPositions[id] = {
        left: rect.left,
        top: rect.top,
      }
    }

1.  点击时实时获取元素位置

// handle link click
    
    const scrollToChapter = (chapterId) => {
    
      const element = document.getElementById(chapterId);
      const rect = element.getBoundingClientRect();
    
      window.scrollTo({
        top: rect.top,
        behavior: 'smooth'
      })
    
    }

无论哪种方法,都需要在**组件挂载后**获取元素的位置信息。

这样我们就可以在点击目录链接时,正确滚动到对应的章节位置了。

#### 数据注水 ####

但是点击目录只解决了一半问题,滚动高亮还需要解决。

这里就需要用到**数据注水**的技术。

简单来说就是:

*  在服务端渲染时,读取路由参数,提前计算高亮状态
 *  将高亮数据注入到响应中
 *  客户端拿到注水的数据后渲染,不会出现高亮错位

实现步骤:

1.服务端获取参数和数据

// 在getServerSideProps中
    
    export async function getServerSideProps(context) {
        
      
      const {
         hashtag } = context.query;
    
      const chapters = await fetchChapters();
    
      const highlightedChapter = chapters.find(ch => ch.id === hashtag);
    
      return {
        
        props: {
        
          chapters,
          highlightedChapter  
        }
      }
    
    }

2.客户端读取props

function Nav({ chapters, highlightedChapter }) {
    
      return (
        <ul>
          {chapters.map(ch => (
            <li className={ch.id === highlightedChapter?.id ? 'highlighted' : ''}>
            </li>
          ))}
        </

[392ccc53ba5743a6a75fd2448049a828.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/f845446a14604e71bcd7337f0d061e2c.jpeg
[JavaScript]: https://www.coding-time.cn
[linwu]: https://www.coding-time.cn/lc
[20210106205503299.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/712a01bd124b4b82b4c73872308550c4.gif
[useScrollIntoView]: https://github.com/sandstreamdev/react-use/blob/master/docs/useScrollIntoView.md
[image.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/2fdd6c6fed514e699e2c546ce5fedade.png