Javascript 更改React中粘性组件的文本

我在屏幕的左侧有一个粘性文本。我想在用户滚动到某个部分时立即更改文本。与初始加载时一样，我想显示主页，在用户滚动到“关于”部分后，文本将更改为“关于”。 到目前为止，我已经使用状态和窗口滚动。但使用这个我的网站性能下降。 我知道我没有有效地使用效果挂钩

import React, { useState, useEffect } from "react";

import DrawerToggleButton from "../SideDrawer/DrawerToggleButton";
import "./Tracer.css";

const Tracer = props => {
  const [scroll, setScroll] = useState(0);
  const [offsetValue, setOffsetValue] = useState(0);
  const [currentText, setCurrentText] = useState("Home");

  useEffect(() => {
    document.addEventListener("scroll", () => {
     setOffsetValue(window.pageYOffset);
}
    });
  });
  const text =
    offsetValue > 285 ? "About" : offsetValue > 627 ? "Skills" : "Home";
  console.log("scorllOffser", offsetValue);
  return (
    <div>
      <header className={"toolbar2"}>
        <nav className="toolbar__navigation2">
          <div className="toolbar__logo2">
            <h1>{currentText}</h1>
          </div>
          <div className="spacer" />
        </nav>
      </header>
      {props.children}
    </div>
  );
};

export default Tracer;

import React，{useState，useffect}来自“React”；
从“./SideDrawer/DrawerToggleButton”导入抽屉按钮；
导入“/Tracer.css”；
常量跟踪器=道具=>{
常量[滚动，设置滚动]=使用状态（0）；
常量[offsetValue，setOffsetValue]=useState（0）；
const[currentText，setCurrentText]=useState（“主页”）；
useffect（（）=>{
document.addEventListener（“滚动”（（）=>{
setOffsetValue（window.pageYOffset）；
}
});
});
常量文本=
偏移值>285？“关于”：偏移值>627？“技能”：“家”；
console.log（“scorloffser”，offsetValue）；
返回(
{currentText}
{props.children}
);
};
导出默认跟踪程序；

---

我尝试了不同的变体，甚至得到了结果，但性能是问题所在。

您需要在效果中清理事件侦听器，并在效果上添加依赖项数组

尽管scroll事件以拥有大量事件而闻名，但我还是建议对侦听器进行去抖动/节流。我通常用洛达斯的

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

import DrawerToggleButton from '../SideDrawer/DrawerToggleButton';
import './Tracer.css';

const Tracer = (props) => {
  const [scroll, setScroll] = useState(0);
  const [offsetValue, setOffsetValue] = useState(0);
  const [currentText, setCurrentText] = useState('Home');

  useEffect(() => {
    const listener = () => {
      setOffsetValue(window.pageYOffset);
    };
    document.addEventListener('scroll', listener);
    return () => {
      document.removeEventListener('scroll', listener);
    };
  }, []);
  const text = offsetValue > 285 ? 'About' : offsetValue > 627 ? 'Skills' : 'Home';
  console.log('scorllOffser', offsetValue);
  return (
    <div>
      <header className={'toolbar2'}>
        <nav className="toolbar__navigation2">
          <div className="toolbar__logo2">
            <h1>{currentText}</h1>
          </div>
          <div className="spacer" />
        </nav>
      </header>
      {props.children}
    </div>
  );
};

export default Tracer;

import React，{useState，useffect}来自“React”；
从“../SideDrawer/DrawerToggleButton”导入抽屉按钮；
导入“/Tracer.css”；
常量跟踪器=（道具）=>{
常量[滚动，设置滚动]=使用状态（0）；
常量[offsetValue，setOffsetValue]=useState（0）；
const[currentText，setCurrentText]=useState（'Home'）；
useffect（（）=>{
常量侦听器=（）=>{
setOffsetValue（window.pageYOffset）；
};
document.addEventListener（'scroll'，listener）；
return（）=>{
document.removeEventListener（'scroll'，listener）；
};
}, []);
const text=offsetValue>285？'About'：offsetValue>627？'Skills'：'Home'；
console.log（'scorloffser'，offsetValue）；
返回(
{currentText}
{props.children}
);
};
导出默认跟踪程序；

您需要清理效果中的事件侦听器，并在效果上添加依赖项数组

尽管scroll事件以拥有大量事件而闻名，但我还是建议对侦听器进行去抖动/节流。我通常用洛达斯的

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

import DrawerToggleButton from '../SideDrawer/DrawerToggleButton';
import './Tracer.css';

const Tracer = (props) => {
  const [scroll, setScroll] = useState(0);
  const [offsetValue, setOffsetValue] = useState(0);
  const [currentText, setCurrentText] = useState('Home');

  useEffect(() => {
    const listener = () => {
      setOffsetValue(window.pageYOffset);
    };
    document.addEventListener('scroll', listener);
    return () => {
      document.removeEventListener('scroll', listener);
    };
  }, []);
  const text = offsetValue > 285 ? 'About' : offsetValue > 627 ? 'Skills' : 'Home';
  console.log('scorllOffser', offsetValue);
  return (
    <div>
      <header className={'toolbar2'}>
        <nav className="toolbar__navigation2">
          <div className="toolbar__logo2">
            <h1>{currentText}</h1>
          </div>
          <div className="spacer" />
        </nav>
      </header>
      {props.children}
    </div>
  );
};

export default Tracer;

import React，{useState，useffect}来自“React”；
从“../SideDrawer/DrawerToggleButton”导入抽屉按钮；
导入“/Tracer.css”；
常量跟踪器=（道具）=>{
常量[滚动，设置滚动]=使用状态（0）；
常量[offsetValue，setOffsetValue]=useState（0）；
const[currentText，setCurrentText]=useState（'Home'）；
useffect（（）=>{
常量侦听器=（）=>{
setOffsetValue（window.pageYOffset）；
};
document.addEventListener（'scroll'，listener）；
return（）=>{
document.removeEventListener（'scroll'，listener）；
};
}, []);
const text=offsetValue>285？'About'：offsetValue>627？'Skills'：'Home'；
console.log（'scorloffser'，offsetValue）；
返回(
{currentText}
{props.children}
);
};
导出默认跟踪程序；

每次更新都会调用useEffect，因此您会多次调用addEventListener。这将明显降低应用程序的性能。您应该只调用addEventListener一次，并且在卸载组件之前移除EventListener。添加此选项以仅执行一次这两项操作：

useEffect(() => {
   // adding event listener on mount here
   return () => {
       // cleaning up the listener here
   }
}, []);

---

最重要的部分是末尾的[]，它只会使useEffect触发一次

每次更新都会调用useEffect，因此您会多次调用addEventListener。这将明显降低应用程序的性能。您应该只调用addEventListener一次，并且在卸载组件之前移除EventListener。添加此选项以仅执行一次这两项操作：

useEffect(() => {
   // adding event listener on mount here
   return () => {
       // cleaning up the listener here
   }
}, []);

---

最重要的部分是末尾的[]，它将使useEffect只触发一次

useEffect钩子需要一个数组或依赖对象，否则它将在无限循环中运行。您可以放置一个包含一段状态的数组，以便在状态更改时运行它

您需要设置一个状态（我只需要创建一个包含当前节标题字符串的状态），并将其设置为依赖项

  useEffect(() => {
    document.addEventListener("scroll", () => {
     setOffsetValue(window.pageYOffset);
}
    }, [<Your State here>]);

useffect（（）=>{
document.addEventListener（“滚动”（（）=>{
setOffsetValue（window.pageYOffset）；
}
}, []);

---

您还可以通过在参数列表中放置一对空括号将其设置为在DOM加载时运行。

useEffect挂钩需要一个数组或依赖项对象，否则它将在无限循环中运行。您可以放置一个包含一段状态的数组，以便在状态更改时运行它

您需要设置一个状态（我只需要创建一个包含当前节标题字符串的状态），并将其设置为依赖项

  useEffect(() => {
    document.addEventListener("scroll", () => {
     setOffsetValue(window.pageYOffset);
}
    }, [<Your State here>]);

useffect（（）=>{
document.addEventListener（“滚动”（（）=>{
setOffsetValue（window.pageYOffset）；
}
}, []);

---

您还可以通过在参数列表中放置一对空括号将其设置为在DOM加载下运行。

尽管所有答案可能相同

---

虽然所有答案可能都是一样的

---

非常感谢。我是新手。如果我们将此useEffect用作componentDidMount，则会有一个问题，它在安装组件时基本上只运行一次。为什么会反复调用eventListner？useEffect和任何其他具有依赖项数组的挂钩会在依赖项数组中的值发生更改时触发（通过浅相等）.如果有