在React中跳过ExtJS组件子节点的呈现

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 in React的函数。

如果一个组件的输出不受当前状态或道具变化的影响，可以使用shouldComponentUpdate()来让它做出反应。默认行为是在每个状态更改上重新呈现，在绝大多数情况下，您应该依赖于默认行为。 当接收到新的道具或状态时，在呈现之前调用shouldComponentUpdate()。默认为true。对于初始呈现或使用forceUpdate()时，不调用此方法。

因此，只需将此函数添加到您的Component_B：

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

或者您希望重新呈现Component_B，而不是ExtJS应用程序本身？在这种情况下，请在评论中告诉我。