如何在React中实现滚动百分比数值的实时动态渲染

你当前的代码仅在组件首次渲染时执行一次滚动百分比计算，没有绑定滚动事件监听触发组件重渲染，因此滚动过程中React不会更新页面展示的数值，自然无法实时同步滚动进度。

修改后的完整代码如下：

import React, { useState, useEffect } from 'react'

const App = () => {  
  const [scrollPercent, setScrollPercent] = useState(0)

  useEffect(() => {
    const getScrollPercent = () => {
      const h = document.documentElement, 
        b = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';

      const percent = Math.round((h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100);
      return isNaN(percent) ? 0 : percent
    }

    const handleScroll = () => {
      setScrollPercent(getScrollPercent())
    }

    // 绑定滚动监听，passive设为true提升滚动性能
    window.addEventListener('scroll', handleScroll, { passive: true })

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  return (
    <p>{`${scrollPercent}%`}</p>
  )
}

• 新增useState存储滚动百分比数值，数值变化时会自动触发React组件重渲染
• 通过useEffect在组件挂载时绑定全局滚动事件监听，每次滚动触发时重新计算百分比并更新状态
• 增加组件卸载时的监听移除逻辑，避免内存泄漏

如果担心滚动事件触发频率太高影响性能，可以给滚动回调增加节流逻辑，比如限制100ms最多执行一次计算：

// 在useEffect内定义handleScroll前加入节流逻辑
let timer = null
const throttledHandleScroll = () => {
  if (timer) return
  timer = setTimeout(() => {
    setScrollPercent(getScrollPercent())
    timer = null
  }, 100)
}
// 绑定监听的时候用throttledHandleScroll代替handleScroll即可

内容的提问来源于stack exchange，提问作者user16686016