react-scroll在每个滚动上创建事件监听器

Question

我使用react-scroll让用户在点击时顺畅地向下移动，但有一个问题。

为什么每次点击animateScroll.scrollToBottom都会创建额外的事件监听器(3到5个)？在chrome dev-tools中签入。这不会导致性能损失吗？卸载组件后，事件侦听器不会被删除。

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一样的道具，每次组件被调用的时候都会被重新渲染！

简单地说，为了减少这个问题，将组件放在头文件direact！中，并且只传递值，不需要每次都更新它……

例如：

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

任何react都不会根据需要重新渲染的组件上的任何更改来处理渲染。

另请注意，如果你需要在组件内部设置一个函数，并需要防止重新渲染它，你可以使用useCallBack作为函数，使用useMemo作为所需的返回值，如下所示：

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