react-scroll 在每次滚动时创建事件监听器

Question

I use react-scroll to move the user smoothly down the site on click but there is a problem.

Why are additional event listeners (3 to 5) created every time animateScroll.scrollToBottom is clicked? Checked in chrome dev-tools. Does this not contribute to loss of performance? After unmounting the component event listeners are not removed.

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

I think your issue since you are try to write component as a props like Header.Text, this will re-render every time the component is called!

Simply to reduce this issue, put the components in Header direact,, and just pass the value. no need to update its every time...

For example:

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

No react will handle render base on any change on component which its need to render again...

Another note, if you need to set a function inside component and need to prevent re-render for it you can use useCallBack for funcation and useMemo for return value needed like:

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