将 class 组件转换为 reactJS 中的功能组件

Question

我想在 React 中制作视差效果。

我找到了解释操作方法的教程 on medium。

我的代码是用功能组件编写的，但在示例中它是 class 组件。

示例如下

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 的第二个参数，以便在组件 initialization/mounting.
之后仅调用一次
useEffect(() => { window.addEventListener('scroll', () => setOffset(window.pageYOffset)); return () => window.removeEventListener('scroll', () => setOffset(window.pageYOffset)); },[]);

像这样编写 useEffect 应该可行

将 class 组件转换为 reactJS 中的功能组件

Transform class component to functionnal component in reactJS

javascript

reactjs

react-functional-component