在useState中将对象用作状态时防止重新渲染

Question

背景：

我正在渲染可折叠元素的动态列表。崩溃的打开/关闭状态存储为一个对象，

public interface MyInterface {
//               ^2
  public void aMethod();
//            ^3
}

，此状态通过onClick与

切换

 cosnt [collapse, setCollapse] = useState({a: false, b: false, c: false })

折叠工作，但每个折叠元素都重新渲染，因为根据我的理解，每次切换都会创建一个新对象，从而导致所有折叠元素都重新渲染。我只想重新渲染切换后的折叠。

问题：

如何在不导致其他折叠元素重新渲染的情况下完成切换？

示例

在控制台中可以看到，单击一次即可重新渲染所有折叠元素。

Answer 1

有两种防止重新呈现的方法：

"^(FS170|FS160)$" ：用于功能组件 用以下内容包装组件：

React.memo()

这保证只有在道具更改时才重新渲染。这等效于纯组分。

---

React.memo(<Component />)：用于课程组件 与上述相同。

用于类组件的另一种有效方式是控制React.PureComponent()，这种情况下不应该使用它。

在您的情况下，请用shouldComponentUpdate括起来以避免重新渲染。

Answer 2

您将Collapse设为controlled component，在单击时制作了父渲染，因此它无法按预期工作。

如果要避免呈现，则需要使用不受控制的版本或将其包装并组成不受控制的版本。

请参阅React文档中的Controlled VS. Uncontrolled。

您在reactstrap文档中拥有不受控制的版本：

import React from 'react';
import { UncontrolledCollapse, Button, CardBody, Card } from 'reactstrap';

const Example = () => (
  <div>
    <Button color="primary" id="toggler" style={{ marginBottom: '1rem' }}>
      Toggle
    </Button>
    <UncontrolledCollapse toggler="#toggler">
      <Card>
        <CardBody>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt magni, voluptas debitis
          similique porro a molestias consequuntur earum odio officiis natus, amet hic, iste sed
          dignissimos esse fuga! Minus, alias.
        </CardBody>
      </Card>
    </UncontrolledCollapse>
  </div>
);

export default Example;