Как визуализировать компоненты React только один раз при запуске?

Question

Я читал документы об эффективности, но не могу найти ответ на свой вопрос ...

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

Моя проблема заключается в том, что при нажатии клавиш и обновлении этого одного компонента все остальные кнопки будут отображаться тоже (наблюдается через инструменты React dev для Chrome). Я не реализовал shouldComponentUpdate(nextProps, nextState) на моих кнопках, но не должен ли React иметь это поведение по умолчанию? Я имею в виду, сравните this.props с nextProps, и если они точно такие же, не звоните render()?

Я должен сделать это самостоятельно для каждого компонента, который должен отображаться только один раз при запуске приложения?

EDIT:PureComponent кажется решить проблему ... Но вместо того, чтобы создать новый вопрос, я обновляю это с связанным с этим вопросом:

Почему бы документацией рекомендовать, чтобы все компоненты на основе PureComponent по умолчанию? Каковы аргументы против использования PureComponent по умолчанию вместо типичного Component?

Answer 1

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

Link to the docs.

Если ваш React функции компонента визуализации() делает тот же результат, учитывая тот же реквизит и состояние, вы можете использовать React.PureComponent для увеличения производительности в некоторых случаях.