Javascript 当在这些组件的数组中导航时，在滑块中重新命名组件时出现问题

我正在尝试实现一个定制的滑块组件，它有100vw长，有两个组件，一个在左边，一个在右边，在任何给定的时间溢出屏幕外。看起来像这样：

按下

Next

按钮时，屏幕将X转换为右侧100vw，按下

Previous

按钮时，屏幕将X转换为左侧100vw

无论屏幕以何种方式移动，

currentSlide

变量都会相应地重新分配

我遇到的问题是，当我重新分配

currentSlide

时，所有这些组件都会重新渲染

这是我的滑块组件：

import React from "react";
import {
  SliderContainer,
  SlideLeft,
  SlideCenter,
  SlideRight,
  Button,
  ControlsContainer
} from "./styled-components";
import slides from "./slides";

export default function Slider() {
  const [currentSlide, setCurrentSlide] = React.useState(0);
  const previousButtonDisabled = currentSlide === 0;
  const nextButtonDisabled = currentSlide + 1 > slides.length;

  // if true, translate right,
  // if false, translate left,
  // if undefined, nothing is translating
  const [translate, setTranslate] = React.useState(undefined);

  const handleClick = React.useCallback(
    (isForward) => {
      setTranslate(isForward);

      setTimeout(() => {
        setTranslate(undefined);
        setCurrentSlide(isForward ? currentSlide + 1 : currentSlide - 1); // <-- the components re-render at this stage
      }, 1000);
    },
    [currentSlide]
  );
  return (
    <SliderContainer>
      <SlideLeft
        translate={translate}
        as={(currentSlide > 1 && slides[currentSlide - 1]) || null}
      />
      <SlideCenter translate={translate} as={slides[currentSlide]} />
      <SlideRight
        translate={translate}
        as={
          (currentSlide < slides.length - 1 && slides[currentSlide + 1]) || null
        }
      />
      <ControlsContainer>
        <Button
          disabled={previousButtonDisabled}
          onClick={() =>
            previousButtonDisabled ? undefined : handleClick(false)
          }
        >
          Previous
        </Button>
        <Button
          disabled={false}
          onClick={() => (nextButtonDisabled ? undefined : handleClick(true))}
        >
          Next
        </Button>
      </ControlsContainer>
    </SliderContainer>
  );
}
s

从“React”导入React；
进口{
幻灯片容器，
斯莱德莱夫特，
SlideCenter，
幻灯片，
按钮
控制容器
}来自“/样式化组件”；
从“/slides”导入幻灯片；
导出默认函数滑块（）{
常量[currentSlide，setCurrentSlide]=React.useState（0）；
const previousButtonDisabled=当前幻灯片===0；
const nextButtonDisabled=currentSlide+1>slides.length；
//如果为真，请正确翻译，
//如果为false，请向左翻译，
//如果未定义，则不进行任何转换
const[translate，setTranslate]=React.useState（未定义）；
const handleClick=React.useCallback(
（isForward）=>{
setTranslate（isForward）；
设置超时（（）=>{
setTranslate（未定义）；
setCurrentSlide（isForward？currentSlide+1:currentSlide-1）；//
previousButtonDisabled？未定义：handleClick（假）
}
>
以前的
（nextButtonDisabled？未定义：handleClick（true））}
>
下一个
);
}
s

我知道我可以映射整个

幻灯片

数组，并在屏幕外渲染它们，在不使用重新渲染器的情况下，只翻译X任意多次，但是如果我有50个组件呢？如果我有100个组件呢？如果它们都有事件侦听器呢？这种方法会对DOM和客户端造成太多污染

有没有一种方法可以循环浏览

幻灯片

，在任何给定的时间内最多只渲染3个组件？每当

currentSlide

发生更改时，所有内容都会重新渲染，这可能会降低应用程序的运行速度，具体取决于活动的3个组件的大小

---

问题到底是什么？当

滑块的状态更新时，您正在渲染的三张幻灯片会重新渲染？这就是功能组件的工作方式，您可以将不同的
组件作为
组件传递到“左”、“中”和“右”每次
currentSlide
状态更新时，幻灯片容器都会更新，因此每个幻灯片的道具也会更改。您可以尝试维护一个由3个元素组成的数组，并从末端推动/弹出和移动/取消移动，但我不确定这是否适用于您已建立的转换。是的，这是我的问题。就您的建议而言，我认为我仍然会我看到了每个组件的重新渲染器，因为正如你所说，我的转换是动态分配的。我无法弄清楚这一点，我想在没有看到重新渲染器的情况下是不可能实现的。到底是什么问题？当
Slider
的状态更新时，你正在渲染的三张幻灯片会重新渲染？这就是f功能组件工作，您将不同的
作为
组件传递到“左”、“中”和“右”每次
currentSlide
状态更新时，幻灯片容器都会更新，因此每个幻灯片的道具也会更改。您可以尝试维护一个由3个元素组成的数组，并从末端推动/弹出和移动/取消移动，但我不确定这是否适用于您已建立的转换。是的，这是我的问题。就您的建议而言，我认为我仍然会我看到每个组件都有一个重新渲染器，因为正如你所说，我的转换是动态分配的。我还没有弄明白这一点，我想如果不看到重新渲染器，就不可能实现这一点。