Javascript 如何在卷轴上重新渲染？

我的代码是用来在滚动通过一个点时激活一个进程的

一切都正常，但除非我进行状态更改以导致重新渲染，否则使用效果挂钩不会激活。我怎样才能改变它，使其失活？当我刚刚有一个有条件的内部状态更改时，它既容易出现延迟，也会导致切换到另一个页面时出现问题

import React, {useEffect, useRef} from 'react';
import "./styles.css";

export default function App() {
  let myRef = useRef(null);

  useEffect( () => {

    if (window.pageYOffset > myRef.current.offsetTop)
    { console.log("hello friend")
    }
    })

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button
        onClick={() => {
          console.log(myRef.current.offsetTop);
        }}
      >
        {" "}
        test
      </button>
      <br />

      <br />
      <br />
      <br />
      <div ref={myRef}>
        <h1> hi, this is a test</h1>
      <br />
      <br />
      <br />
 <br />
      </div>
    </div>
  );
}

import React，{useffect，useRef}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
设myRef=useRef（null）；
useffect（（）=>{
如果（window.pageYOffset>myRef.current.offsetTop）
{console.log（“你好朋友”）
}
})
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
{
日志（myRef.current.offsetTop）；
}}
>
{" "}
测试








嗨，这是考试








);
}

这是一支密码笔，上面有我的问题。

---

为什么不将

YoffSet

设置为这样的状态：

const[yOffSet，setYoffSet]=useState（“”）

然后在

useffect

中添加事件侦听器：

useEffect(() => {
    window.addEventListener("scroll",() => {
      if(window.pageYoffSet > chooseAValue) {
        setYoffSet(//whateverValueYouWant)
      }
  }, []);

---

然后您正在设置状态，这将触发重新渲染

您的演示对ScrollThankyu没有任何作用，我丢失了“window.addEventListener”位。非常感谢：）