Question

我想在反应中产生一个视差效果。

我找到了一个说明on medium的教程。

我的代码是用函数组件编写的，但在示例中是类组件。

这是例子

class Header extends React.Component {
  constructor() {
    super()

    this.state = {
      offset: 0
    };
  }
return (
  <header 
    className='header-background'
    style={{ backgroundPositionY: this.state.offset}}
  >
    <section
      className='info-container'
      style={{ bottom: this.state.offset / 2 }}
    >
      <h1>Kevin Simpson</h1>
      <h3>Front End Developer</h3>
    </section>
  </header>
)
}

componentDidMount() {
  window.addEventListener('scroll', this.parallaxShift);
}
componentWillUnmount() {
  window.removeEventListener('scroll', this.parallaxShift);
}
parallaxShift = () => {
  this.setState({
    offset: window.pageYOffset
  });
};

我将其知识转化为功能

const [offset, setOffset] = useState(0);
useEffect(() => {
    window.addEventListener('scroll', setOffset(window.pageYOffset));
});
return (
  ...
  <svg style={{ bottom: offset }} className="border-circle" width={107} height={107} viewBox="0 0 107 107" >
  ....

实际上，当我滚动时，不会触发setOffset，事件监听器不会触发事件。

Answer 1

我发现您的代码存在三个问题

您没有删除监听器。这将导致内存泄漏，即性能问题。
addEventListener的第二个参数必须是函数定义而不是函数调用。
useEffect。要具有与componentDidMount相同的功能，请添加一个空数组作为useEffect的第二个参数，以使其在组件初始化/安装后仅被调用一次。

useEffect（（）=> { window.addEventListener（'scroll'，（）=> setOffset（window.pageYOffset））; return（）=> window.removeEventListener（'scroll'，（）=> setOffset（window.pageYOffset））; }，[]）;

写这样的useEffect应该可以

在ReactJS中将类组件转换为功能组件

1 个答案: