Предотвращение рендеринга при использовании объекта в качестве состояния в useState

Question

Фон:

Я рендеринг динамического списка складных элементов. Открытое / закрытое состояние свертывания сохраняется в объекте как

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

, и это состояние переключается с помощью onClick с

const toggle = (id) => setCollapse({...collapse, [id]: !collapse[id]})

Работа свертывания, но все элементы свертывания перерисовываютсяс каждым переключателем, поскольку, согласно моему пониманию, при каждом переключении создается новый объект, который вызывает повторное отображение всех элементов коллапса. Я хочу только повторно воспроизвести переключаемый коллапс.

Вопрос:

Как можно выполнить переключение, не вызывая повторное отображение других элементов коллапса?

Пример

В консоли видно, что один щелчок приводит к повторному отображению всех элементов свертывания.

Answer 1

Существует два способа предотвращения повторного рендеринга:

React.memo(): для функциональных компонентов Оберните компонент с помощью:

React.memo(<Component />)

Это гарантирует, что это только возобновится, если опора изменяется. Это эквивалент чистого компонента.

---

React.PureComponent(): для компонентов класса То же, что и выше.

Другим ванильным способом для компонентов класса было управление shouldComponentUpdate, на которое не следует полагаться в этом случае.

В вашем случае, оберните с React.memo, чтобы избежать повторногорендеринг.

Answer 2

Вы делаете Collapse как контролируемый компонент , при нажатии вы делаете родительский рендер, и поэтому он не работает так, как вы ожидаете.

Если вы хотите избежатьрендеринг, вам нужно использовать неконтролируемую версию или обернуть ее и составить ее как неуправляемую.

См. Контролируемая VS. Неуправляемый в React документах.

У вас есть неуправляемая версия в 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;