react-scroll 在每次滾動時創建事件監聽器

Question

我使用 react-scroll 在點擊時將用戶平穩地移到網站上，但有一個問題。

為什么每次單擊animateScroll.scrollToBottom時都會創建額外的事件偵聽器（3 到 5 個）？ 檢查了 chrome 開發工具。 這不會導致性能損失嗎？ 卸載組件后，事件偵聽器不會被刪除。

import React from 'react';
import { animateScroll } from 'react-scroll';

import { Container, TextWrapper, Text, TextLink, ArrowWrapper, Arrow } from './styles/header';

export default function Header({ children, ...restProps }) {
  return <Container {...restProps}>{children}</Container>;
}

Header.TextWrapper = function HeaderTextWrapper({ children, ...restProps }) {
  return <TextWrapper {...restProps}>{children}</TextWrapper>;
};

Header.Text = function HeaderText({ children, ...restProps }) {
  return <Text {...restProps}>{children}</Text>;
};

Header.TextLink = function HeaderTextLink({ children, ...restProps }) {
  return <TextLink {...restProps}>{children}</TextLink>;
};

Header.Arrow = function HeaderArrow({ ...restProps }) {
  return (
    <ArrowWrapper {...restProps} onClick={animateScroll.scrollToBottom}>
      <Arrow />
      <Arrow />
      <Arrow />
    </ArrowWrapper>
  );
};

Answer 1

我認為您的問題是因為您嘗試將組件編寫為 Header.Text 之類的道具，每次調用組件時都會重新渲染！

只是為了減少這個問題，把組件直接放在 Header 中，然后傳遞值。 不需要每次都更新...

例如：

export default function HeaderText(props) {
  return <h1></h1>
}
export default function HeaderBody(props) {
  return <p>Body</p>
}
    export default function Header(props) {
      return <Container>
       <HeaderText />
       <HeaderBody />
    </Container>;
    }

任何反應都不會根據需要再次渲染的組件上的任何更改來處理渲染...

另一個注意事項，如果您需要在組件內部設置 function 並且需要防止重新渲染它，您可以使用 useCallBack 進行功能，使用 useMemo 來獲取所需的返回值，例如：

const text = useMemo(() => {return <Link to=""> Test </Link>}, []);