我如何在滚动时重新渲染反应？

Question

我的代码旨在在滚动通过一个点时激活一个进程。

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

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>
  );
}

这是我的确切问题的代码笔。https://codesandbox.io/s/prod-silence-8f07c?file=/src/App.js

Answer 1

为什么不像这样在 state 中设置YoffSet ：

const [yOffSet, setYoffSet] = useState('')

然后在useEffect添加一个事件监听器：

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

那么你正在设置 state 这将触发重新渲染