Пропустить рендеринг подузла компонента ExtJS в React

Question

Мы строим экспликацию с React (и Redux), где один компонент (Component_B) представляет собой оболочку вокруг стороннего приложения, написанного на ExtJS.

Эта сторонняя программа тяжело перерисовывается, поэтому мы хотели бы свести к минимуму время ее повторной визуализации с помощью React.

Component_B имеет state и props, которые регулярно меняются и заставляют Component_B перерисовываться. Когда Component_B props и state изменяются, мы явно вызываем некоторые из функций ExtJS для обновления визуальной визуализации Third-Party App.

        .---------------------------------------------------------------.
        | Component_A                                                   |
        |                                                               |
        |                                                               |
        |                   .------------------------------------------.|
        |                   | Component_B                              ||
        |                   |                                          ||
        |                   |    .------------------------------------.||
        |                   |    | Third-Party App (written in ExtJS) |||
        |                   |    |                                    |||
        |                   |    '------------------------------------'||
        |                   '------------------------------------------'|
        '---------------------------------------------------------------'

Как можно избежать, чтобы изменения component_B props и state вызвали повторную визуализацию Third-Party App, хотя на Third-Party App повлияли изменения в component_B?

Answer 1

Я думаю, что вы ищете функцию с именем shouldComponentUpdate в React.

Используйте shouldComponentUpdate (), чтобы сообщить React, если на выход компонента не влияет текущее изменение состояния или параметров. Поведение по умолчанию заключается в повторном рендеринге при каждом изменении состояния, и в подавляющем большинстве случаев вы должны полагаться на поведение по умолчанию.

shouldComponentUpdate () вызывается перед рендерингом при получении новых реквизитов или состояний. По умолчанию true. Этот метод не вызывается для начального рендеринга или при использовании forceUpdate ().

Так что просто добавьте к вашему Component_B эту функцию:

shouldComponentUpdate(nextProps, nextState) {
    ...
    return false;
}

Или вы хотите, чтобы Component_B отображался повторно, а не само приложение ExtJS? В этом случае, пожалуйста, дайте мне знать в комментариях.