当状态改变时，我的整个 React 组件是否会不必要地重新渲染？

Question

我正在尝试使用 React 创建一个手风琴组件，但动画不起作用。

我相信，基本思想是非常标准的，我给每个项目主体的max-height为0 ，这会受到向元素添加show类的影响。 我可以选择并显示我想要的项目，但滑入/滑出的动画不起作用。

打开 Chrome 开发工具后，当我单击其中一项时，我可以看到整个“手风琴”元素都在闪烁，这让我相信整个元素正在重新渲染。 但我不确定为什么会这样。

这是相关的Accordion组件：

import React, { useState } from "react";

const Accordion = ({ items }) => {
  const [selectedItem, setSelectedItem] = useState(0);

  const AccordionItem = ({ item, index }) => {
    const isOpen = index === selectedItem;
    return (
      <div className="accordion-item">
        <div
          onClick={() => {
            setSelectedItem(index);
          }}
          className="accordion-header"
        >
          <div>{item.heading}</div>
        </div>
        <div className={`accordion-body ${isOpen ? "show" : ""}`}>
          <div className="accordion-content">{item.body}</div>
        </div>
      </div>
    );
  };

  return (
    <div className="accordion">
      {items.map((item, i) => {
        return <AccordionItem key={i} item={item} index={i} />;
      })}
    </div>
  );
};

export default Accordion;

这是一个说明问题的代码笔：

https://codesandbox.io/s/heuristic-heyrovsky-xgcbe

Answer 1

当然，它会重新渲染。 当您调用setSelectedIem 时，状态会发生变化，因此会对状态变化进行重新渲染以显示该变化。

现在如果你把这个

const [selectedItem, setSelectedItem] = useState(0);

在 Accordion Item 中，它只会重新渲染 Accordion 项目，但会弄乱您的功能。